Question posted in 
I stumbled across this water wave animated footer on YouTube and I’m currently working on a project myself so I decided to implement the footer into my own project. The thing is that’s it’s not working. The "wave" image is not showing up in the first place. I’ll drop my code, the YouTube link and what the footer looks like in my project below. I’d appreciate your help, and thank you for your time!
footer{
position: relative;
width: 100%;
background: var(--dark-color);
min-height: 100px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 150px;
}
footer .social-icons,
footer .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
}
footer .social-icons li a{
font-size: 2em;
color: var(--light-color);
margin: 0 10px;
display: inline-block;
transition: 0.5s;
}
footer .social-icons li a:hover{
transform: translateY(-10px);
}
footer .menu li a{
font-size: 1.2em;
color: var(--light-color);
margin: 0 10px;
display: inline-block;
transition: 0.5s;
text-decoration: none;
opacity: 0.75;
}
footer .menu li a:hover{
opacity: 1;
}
footer .waves .wave{
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url(https://i.postimg.cc/TPBH3rHw/blue-waves.png);
background-size: 1000px 100px;
}
footer .waves .wave #wave1{
z-index: 1000;
opacity: 1;
bottom: 0;
animation: animateWave 4s linear infinite;
}
footer .waves .wave #wave2{
z-index: 999;
opacity: 0.5;
bottom: 10px;
animation: animateWave_02 4s linear infinite;
}
footer .waves .wave #wave3{
z-index: 1000;
opacity: 0.2;
bottom: 15px;
animation: animateWave 3s linear infinite;
}
footer .waves .wave #wave4{
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animateWave_02 3s linear infinite;
}
@keyframes animateWave{
0%{
background-position-x: 1000px;
}
100%{
background-position-x: 0px;
}
}
@keyframes animateWave_02{
0%{
background-position-x: 0;
}
100%{
background-position-x: 1000px;
}
}<footer>
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<ul class="social-icons">
<li><a href=""><i class = "fab fa-instagram"></i></a></li>
<li><a href=""><i class = "fab fa-instagram"></i></a></li>
<li><a href=""><i class = "fab fa-instagram"></i></a></li>
<li><a href=""><i class = "fab fa-instagram"></i></a></li>
</ul>
<ul class="menu">
<li><a href="">Services</a></li>
<li><a href="">Work</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</footer>YouTube project link:
https://www.youtube.com/watch?v=UpkEANWC2Ms&t=605s
My footer:
What my project’s footer looks like
I tried changing the height and width of the "waves" class, messed around with all the values of the classes involved, copied the YouTuber’s code to the dot, I relocated the image and tried it several times, nothing changed. The image still does not show up let aside animate.
Side note: The YouTuber I’m following had display: flex; on the body element, this might be the problem. Even though I tried doing the same to my body element as well, it messed up my layout but still the image did not show up.
The other problem might be the position of my waves class element but I also tried messing around with that and nothing worked.
2
Answers
I fixed it, it was pretty dumb tbh lol. My css script (styles.css) was in a css folder and for some reason it wasn't fetching the image from the images file, so I moved the styles.css to the main folder and it's working now. Thank you!
When selecting wave3 you are using footer .waves .wave #wave3 you should use
footer .waves #wave3. Same thing for other waves