How to add hover effects to a WordPress gallery
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:
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
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
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
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
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
And this is it!