Tranform translateY property not working for me

HTML-CSS
1

When I hover over one of my social media icons, I want my icons and the words next to my icon to shift vertically upward a little by 5px. But when I hover over the icons after i add the `.social-icon:hover{
transform: translateY(5px);

}`, nothing happens. Here is the link to my code. https://codepen.io/noblegas/pen/WNNOeYx

2

try giving a display:inline-block; :slightly_smiling_face:

3

where? How would that make my icons go vertically up when I hover over them?

4

Also, do I still retain my transform:translateY() property?

5

put it in the <a> tag because they are inline and transform doesnt work on inline so you need to change it to inline-block like so…

.social-icon{
    display:inline-block;
    font-size:2rem;
  }

.social-icon:hover{
    transform: translateY(-10px); 
  }

also if you want a smoother transition

.social-icon{
    display:inline-block;
    font-size:2rem;
    transition: .3s;
  }
2 Likes
6

It would also work if you made the parent container .social-icons a flex or grid container (some technical info).

.social-icons {
  margin-top: 3rem;
  display: flex;
  justify-content: space-evenly;
}

But in general, using inline-block on the links isn’t a bad idea anyway as it gives you some more options for controlling the element box.

1 Like
7

Thanks my good man, that worked.

1 Like