-
Posts
-
I’d like to use the technique seen on this demo site: https://kriesi.at/themes/enfold-shop/
There are 4 boxes that have a hover effect. I’d like to know how this was accomplished. Was CSS applied to the columns?
It appears there is an image with a caption and overlay. Hovering causes the overlay to fade out and the image to zoom in – with the opposite behavior when hover exits.
Thank you.
Hank
Hi ihf-eramstad,
This is another solution as well:
1. Create a Grid Row and set it to 4 columns.
2. In each column put an Image element with the following settings:
Content tab:
– Image Caption: Yes
– Caption: (write anything)
Styling:
– Image Styling: No Styling
– Image Alignment: Center
– Caption Overlay Opacity: 0.7
– Caption Overlay Background Color: (anything but the demo uses #6786a1)
– Caption Font Color: #ffffff (demo)
Advanced:
– Image Fade in Animation: none
– Image Hover effect: Yes, slightly increase the image size
– Caption Appearance: Always display caption
Set the link as well if needed.
Just duplicate this image for other columns and just change the image and caption.
Hope this helps.
@cherrmann thanks again for helping out :)Best regards,
Nikko
- You must be logged in to reply to this topic.