Rotation effect on icon mouse hover

[antoine_generau]

Hello,

I’ve like to have a rotation effect on an icon by mouse hover. I added a class to the shortcode, but it’s not working. Could you please help me to make it work?

shorcode: [x_icon type="plus" style="color:#fff; font-size:50px;" class="icon-effect"]

CSS:

.fake-accordion:hover .icon-effect {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

fake-accordion is the class of the column where the shortcode is.

Thanks,
Antoine

[lely]

Hi Antoine,

That CSS is working. You might not see it because that is a plus icon. Rotating it 90deg will give you the same icon look, same position.

Also take note this line .fake-accordion:hover .icon-effect means it will rotate once you hover on column with class .fake-accordion. On the other hand, if you will change it too .fake-accordion .icon-effect:hover it will rotate once you hover on the actual icon.

If you want to see how it works, try adjusting rotation value like this:

.fake-accordion:hover .icon-effect {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
}

Hope this helps.

[antoine_generau]

Thanks. I am stupid as I only needed to change the 90deg

[lely]

You’re always welcome!

Happy to help. Cheers!