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. 

  1. Add a Photo module to your page.
  2. Configure the Photo module as you normally would.
  3. Click the Advanced Tab
  4. 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
  5. 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.