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 Out:
- Hover Zoom Out and Rotate:
- Hover Unblur:
- Grayscale to Color:
- Sepia to Color:
- Hover Zoom In:
Add the CSS for the effect wherever you put your custom CSS.
Copy the CSS for the effect you want from one of the following sections and see this article about where to add custom CSS code.
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 CSS to the Class field on the Advanced tab in the row settings rather than the Photo module settings. The effect will apply to every Photo module contained in the row.
The transition speeds in these 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
This effect adds a smooth zoom effect when you hover over the image.
This effect adds a smooth zoom out effect when you hover over the image.
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.
This effect displays the image in a blurred state and unblurs it on hover.
This effect displays the image in grayscale and brings the color back on hover.
This effect displays the image in sepia tones and brings the color back on hover.