Using animation with icons in css - some tags not working

I’m trying to make my icons background gradually change when hovering over them. I tried separating them by looking up how to use the nth-child attribute, but none of my tags seem to work with them. I think the error lies in the tags with the “:before” command linked at the end of them, but I am unsure how else I’d accomplish this. These tags begin on line 216 - current line of css

my document: https://codepen.io/daniel-albano/pen/qBWrdoV?editors=0100

A video I used for reference and also what I am trying to accomplish (0:04) : https://www.youtube.com/watch?v=QaSLBMqPb2U

I review your code now and i think you got it working already…

It’s still not displaying on my end. I wanted the color to change when hovering over the icon. I got the icons to rotate when hovering, but not the white background to change.

Are you trying to change the background of the circle or the icon color itself on hover?

I want to change to background color of the circle using an animation similar to the video I linked above about 5 seconds in. Their icon background changes over a 0.5S animation and I followed their tutorial, but it didn’t work. I want the background to change exactly like theirs like how it loads up from bottom to top in color.

From what I see in your code, you are writing the before element wrong, there needs two semicolons before it, like this:

a::before

Second, when you are creating a before pseudo element, you need to have a content element in there, otherwise nothing comes up, and you are also missing the width and height for the element being placed before it. Below I have written out on what it’s supposed to look like and will give the same effects as that video.

.contact-links > ul li a::before { // This is for the main styling of the before element
  content: "";
  position: absolute;  
  top: 0;
  left: 0;
  transform: translateY(5rem); // pushes the blue background to the bottom when not hovered, so it stays hidden
  width: 2em;
  height: 2em;
  border-radius: 50%;
  transition: 0.5s; 
}

.contact-links > ul li:nth-child(1) a:hover::before { // When hovered, pushes the blue background up
  transform: translateY(0);
  background: #3b5999;
}

Another key thing to note as well, is to set the .contact-link > ul li a to position relative, other wise your ::before element will not line up correctly. At the end of your code, you are trying to change the bg-color, depending on the child element, but you aren’t doing anything, since you are missing the hover pseudo class, so take my hover example for child 1, and replace the rest with the similar version of it.

1 Like

Thank you! It is finally working. I tried using two semicolons before because thats what w3schools said, but in the video he only used one. Also the position relative seemed to get everything into order, thanks a ton!

Glad you got it working, I only reference that video to see how the animation would look like, so had no idea how the rest of his code went. Always keep in mind of the position, when you are working with the before and after pseudo element, as they always need to be in direct relation with its parent container, if you are doing these types of animations.