-
Posts
-
Dear all,
I recently created a new section on our website featuring images with caption overlays that are linked to our most favored posts.
It already looks quite nice, however, there are some minor adjustments necessary to make it look perfect. :-)
Those adjustements are:
1. On mouse hover, the images are zoomed in. Currently, they zoom in by +10% (i.e., scale(1.1)). I want to adjust this to only +5% (i.e., scale(1,05)).
2. On mouse hover, together with the image, the caption text is also zoomed in. This should be disabled. (I.e., the caption text’s size should stay as it is while the images are zoomed in.)
3. On mouse hover, the grey image overlay is becoming transparent. This should be disabled. (I.e., the opacity of the image overlay should not be altered on mouse hover.)
Could you please help with some clever CSS code?
In the private content, I posted a link to the website section I am referring to. In case you need login credentials, please let me know.
Thanks and best regards,
HagenHi Hagen,
Thanks for giving us the link, can you try adding this CSS code:
#top .avia-image-container.av-hover-grow img:hover, #top .avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover { -webkit-transform: scale(1); transform: scale(1); } #top .avia-image-container.av-hover-grow img:hover, #top .avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } #top .av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg { opacity: 0.5 !important; }Hope it helps.
Best regards,
Nikko
- The topic ‘Image with Caption Overlay – Some Adjustments Necessary’ is closed to new replies.