How to add hover effects to a WordPress gallery

← All Topics

In this tutorial we will guide you through some easy steps so you can add gorgeous and neat effects to your WordPress gallery.

Extended Gallery Effects has unlimited possibilities, you can customize colors, timing, fonts etc. In this tutorial you’ll learn how to make an effect like the one below:

1. Create a native gallery using the Gutenberg block. If you don’t know where to start read this tutorial about how to make a WordPress gallery without plugins.

2. Make sure you have Extended Gallery Effects plugin installed and activated.

3. Now the funny part. So, what are we going to do? Basically, on mouse hover, we want:

  • a semi-transparent and coloured layer over the images
  • a slow zoom animation of the image
  • some “artistic” touches like a beautiful font and a small circle behind the caption.

Semi-transparent and coloured layer

So we now want to add a semi-transparent and coloured layer that will be shown when users hover the images. Overlay settings are in the General tab:

wordpress overlay color

We chose color #006891 but clearly you can choose the color you need. Now we’re going to set the opacity which is a how much transparent the overlay is. This is an integer value from 0 (totally transparent) to 100 (totally opaque). For the example gallery we chose 0 for the normal state and 40 for the hover state:

  • Overlay color: #006991
  • Overlay opacity: 0
  • Overlay opacity (hover): 40
wordpress overlay opacity

Slow zoom animation of the image

For the animation on mouse hover we’ll use the Scale setting. The normal state will be 100 (which means the same size, it does’t alter the size of the image) and the hover state will be 110 (which means 110% of the normal size):

  • Scale: 100
  • Scale (hover): 110
wordpress gallery image hover zoom

So the effect will be a WordPress gallery with zoom animation on mouse hover. But there’s still something we’re going to tweak: timing.

Let slow down a bit the animation. Click the Timing panel and use the following settings:

  • Overlay duration: 700
  • Image duration: 850
  • Text duration: 250
wordpress gallery animation settings

Caption font

Now let’s focus on fonts. Extended Gallery Effects contains 600+ fonts so you can be 100% sure there’s the one you’re looking for. You can easily search for it using the Google Fonts website.

For this gallery we chose the Flamenco font and we set a black color which will turn to white on mouse hover:

  • Font: Flamenco
  • Color: #000000
  • Color: #ffffff
  • Font size: 24

Pink circle

And now a final artistic touch. Let’s add a small pinky circle behind the caption. Click the Shapes tab and choose the Circle shape:

  • Shape: Circle
  • Color: #e24476
  • Size: 80
  • Size (hover): 100
  • Opacity: 0
  • Opacity (hover): 40
wordpress hover effects

And this is it!