-
Posts
-
hello, i’d like to add a simple image zoom effect on the blog element thumbnails when you hover over the image. Same as the standard zoom option you guys have for hovering over normal images. Thank you so much for your help
Hey bobfurgo,
The website did not load on my end. Is it available only in certain locations?
Best regards,
VictoriaHi bobfurgo,
Maybe wpengine has some settings for blocking locations. I am from Ukraine, maybe IPs from Ukraine are blocked.
Best regards,
Victoriacan you try the url without the # and just scroll down to the news section? see updated link
It’s just the blog masonry element.
Hi,
Thanks for the link, to add “grow” animation to the images in your Recent News section, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:.avia-content-slider a.slide-image:hover > img { animation: grow 2s; animation-fill-mode: forwards; } @keyframes grow { to { transform: scale(1.2) } }After applying the css, Please clear your browser cache and check.
Best regards,
MikeThank you! It worked. However when I take the cursor off of the image it abruptly goes back to it’s original position. Is there a way we can make it a smoother transition like how it works on a regular image?
Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field instead:.avia-content-slider a.slide-image > img { animation: growout 2s; animation-fill-mode: forwards; } .avia-content-slider a.slide-image:hover > img { animation: growin 2s; animation-fill-mode: forwards; } @keyframes growin { from {transform: scale(1)} to {transform: scale(1.2)} } @keyframes growout { from {transform: scale(1.2)} to {transform: scale(1)} }After applying the css, Please clear your browser cache and check.
Best regards,
Mike
- The topic ‘add zoom effect on blog element’ is closed to new replies.