Add hover effects to the Photo module
Using a custom class and some custom CSS, you can add some really cool hover effects to images.
- Add a Photo module to your page.
- Configure the Photo module as you normally would.
- Click the Advanced Tab
- In the HTML element section, add one of the following values to the Class field, depending on which effect you want. See the description of each effect in the sections below.
- Hover Zoom In:
hover-zoom-in
- Hover Zoom Out:
hover-zoom-out
- Hover Zoom Out and Rotate:
hover-zoom-out-rotate
- Hover Unblur:
hover-unblur
- Grayscale to Color:
gray-scale-img
- Sepia to Color:
sepia-img
- Hover Zoom In:
- Add the CSS for the effect wherever you put your custom CSS.
For tips on where to add custom CSS, see the Related Article below.
The transition speeds in the CSS examples are set to .3s
. You can change the value to speed up or slow down the effect. For example, 1s
will slow the change.
Tip: Shortcut for applying an effect to multiple Photo modules in a row
If you have multiple Photo modules in a row and want to apply an effect to the entire set, add the effect’s class to the Class field on the Advanced tab in the row settings. The effect will apply to each Photo module contained in the row.
Hover Zoom In
This effect adds a smooth zoom effect when you hover over the image.
Hover Zoom Out
This effect adds a smooth zoom out effect when you hover over the image.
Hover Zoom Out and Rotate
This effect shows the image zoomed in and rotated 45 degrees in its default state and adds a smooth zoom out and rotates to upright when you hover over the image.
Hover Unblur
This effect displays the image in a blurred state and unblurs it on hover.
Grayscale to Color
This effect displays the image in grayscale and brings the color back on hover.
Sepia to Color
This effect displays the image in sepia tones and brings the color back on hover.