Hi guys
When hovering over an image the icon transition has some rotation. How can I change this to not rotate but keep the slight zoom in effect for the icon?
Thx
Tim
Hi tvl76!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
a:hover .image-overlay .image-overlay-inside {
-webkit-animation: none;
-moz-animation: none;
animation: none;
}
Cheers!
Yigit
Hi Yigit
I want to Keep the zoom-part of the Animation but get rid of the Rotation. How can I do that?
Thx
Tim
Hi!
Actually, there is no zoom animation. It looks like it’s growing because of the opacity transition. Yigit’s code should remove the rotation.
Cheers!
Ismael
Hi Ismael,
Ok. And yes – Yigit’s code removed the rotation perfectly fine.
If I want to alter the transisition – where can I find the source of the ease-in-out function which is used and how would I apply a filter to it?
Thx & Cheers!
Tim
Hey!
Actually, I’m wrong. There is a scale property. You can find it on css > layout.css file:
@-webkit-keyframes avia_pop_small {
0% { -webkit-transform:rotate(-175deg) scale(0.2); }
100% { -webkit-transform:rotate(0deg) scale(1); }
}
@-moz-keyframes avia_pop_small {
0% { -moz-transform:rotate(-175deg) scale(0.2); }
100% { -moz-transform:rotate(0deg) scale(1); }
}
@keyframes avia_pop_small {
0% { transform:rotate(-175deg) scale(0.2); }
100% { transform:rotate(0deg) scale(1); }
}
Best regards,
Ismael
Perfect! Exactly what I was looking for.
Good work – Big THX!!!