Transform an image when hovering over a text

Question

I'm trying to modify this section.

i'm trying to make it so that when i hover over the Li the SVG icons will do transform: rotate(360deg); is there a possible way to do it? i could make it rotate on icon hover but it will be much better with li hover to make the icons rotate :) here is my code.

 <aside id="aside">
        <h2 class="border">Check Out</h2>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
            integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        
        <ul>
            <li class="lis"> <a href="https://www.youtube.com/channel/UCI6WKNbR0oKxowfpt2IFOsQ?view_as=subscriber">My Youtube <img
                        src="icons8-play-button.svg" alt="" class="img"></a></li>
            <li class="lis"> <a href="https://www.facebook.com/ibrahim.elrayan.125">My Facebook <img src="icons8-facebook.svg"
                        alt="" class="img"></a></li>
            <li class="lis"> <a href="https://www.reddit.com/user/empoliyis">My Reddit <img src="icons8-reddit.svg" alt="" class="img"></a></li>

        </ul>
        
    </aside>

that is the html and this is my CSS

h2 {
  position: relative;
  top: 0px;
  cursor: pointer;
  font-size: 30px;
  width: 100%;
  margin-left: 5px;
  display: inline;
  left: 70px;
}
aside {
  
  width: 300px;
  height: 200px;
  background-color: #1D1F20;
  color: pink;
  position: relative;
  left: 373px;
  border: 5px solid plum;
  transition: 0.5s;
  top: 213px;
}
img {
  position: relative;
  top: 7px;
}
a {
  text-decoration: none;
  color: wheat;
}

li:hover {
  color: #07b39b;
}

a:hover {
  color: gray;
}

img:hover {
  transform: rotate(360deg);
  transition: 1s;
}

there is also some Javascript behind the scenes but i dont think it's necessary for my question, or is it?

score 1 · Answer 1 · answered Nov 24 '20 at 07:01

1

li:hover img {
  transform: rotate(360deg);
  transition: 1s;
}

answered Nov 24 '20 at 07:01

crazychukz

676
1
4
10

score 1 · Accepted Answer · answered Nov 24 '20 at 07:09

1

img {
  position: relative;
  top: 7px;
  transition: 1s;
}

li:hover img {
  transform: rotate(360deg);
}

Also put your transition into the img. Everytime you move with your mouse away it collapses instead of transition smooth back right?

answered Nov 24 '20 at 07:09

bill.gates

14,145
3
19
47

Transform an image when hovering over a text

2 Answers2