This repository contains all the code and resources for the White House project, as featured in my YouTube video. Whether you’re following along or looking to explore the project in depth, you’ll find everything you need here.
Feel free to use, modify, and build upon this code. If you have any questions or run into issues, drop a comment on the video or reach out.
Image and Text Hover
CSS
#f-hover:hover::before {
border-color: white;
opacity: 1;
}
.t-hover {
position: relative;
display: inline-block;
}
.t-hover::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background-color: white;
transition: width 0.3s ease, left 0.3s ease;
}
#f-hover:hover {
width: 100%;
height: 100%;
padding: 25px;
border: 0px solid white;
}
.t-hover:hover::after {
width: 100%;
left: 0;
}
#f-hover {
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
object-fit: cover;
}
#f-hover::before {
content: "";
position: absolute;
top: 25px;
left: 25px;
width: calc(100% - 50px);
height: calc(100% - 50px);
border: 1px solid transparent;
z-index: 1;
transition: border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
pointer-events: none;
box-sizing: border-box;
opacity: 0;
}
#f-hover:hover .t-hover::after {
width: 100%;
left: 0;
}
Different Header on Scroll
Script
<script type="litespeed/javascript">document.addEventListener('DOMContentLiteSpeedLoaded',function(){document.addEventListener('scroll',function(){let y=window.scrollY;let header2=document.getElementById('header2');if(y>75){header2.classList.add('headershow')}else{header2.classList.remove('headershow')}})})</script>
CSS
.elementor-nav-menu__container{
top:0px!important;
}
#header2.headershow{
transform: none;
}
#header2{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-110px);
}