Hiya,
I have a website with 8 icons that I want to sit in a grid 4×2 – I added the Icon grid, which looks great – but I can’t figure out how to remove the hover animation when you rollover them as I just want it completely static.
Any ideas how I can do this?
Thanks
Marie
Hey Marie,
Add this to quick css:
.avia-icongrid-tooltip li:hover .avia-icongrid-content{
opacity:0!important;
}
Best regards,
Jordan Shannon
Thanks for this Jordan
The code hides the white box (which is great) – but they still animate on roll over – I want them completely static :-)
Thanks
M
Hi M,
Can you try add this css code:
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
-webkit-animation: none;
-moz-animation: none;
animation: none;
}
Hope it helps
Best regards,
Nikko
Hi Nikko,
Sorry it doesn’t work – I tried it in a few browsers and it is still animated.
:-(
Thanks
Marie
Hi,
Did you add the code to the very top of quick css so it runs first? Also, be sure to clear the cache a few times over.
Best regards,
Jordan Shannon
Hiya,
I moved the code to the top of the quick css and used a private browsing/incognito window and it still isn’t working – sorry!
Any ideas?
Thanks for your help so far
Marie
Hi Marie,
Try adding this css code in Quick CSS, located in Enfold > General Styling:
#top .avia-icongrid-tooltip li .avia-icongrid-front {
bottom: 50% !important;
-webkit-transform: translateY(50%) !important;
-ms-transform: translateY(50%) !important;
transform: translateY(50%) !important;
}
Best regards,
Nikko
Yay that worked – thank you so much!
Hi pistachiouk,
We’re glad that we could help :)
Thanks for using Enfold and have a great day!
Best regards,
Nikko