Amazing Hover Effects For Your Gallery

With FooGallery, creating a unique photo gallery is simple. You can even do this just by using the hover effects! Of course, there are some other settings you can use as well to create a WOW factor for your WordPress website.

We’ve put together a gallery that does just this. The main focus is on the hover effects, but we’ll take you through exactly which settings we’ve used, so you can create this look for yourself.

Hover Effects

Let’s take a quick look at some of the hover effects you can see at work in the above gallery. The first of these is the new Transparency Theme. Okay, you won’t actually see this effect, as it makes the overlay on hover transparent, rather than giving it a light or dark appearance. When this theme is applied, only the other selected effects will show when hovered over – such as the caption or icon.

If you would prefer nothing to happen on hover, then you can select None as the Effect Type. This will remove all of the hover effects in your gallery.

Next, we’ve used Colorize as the color effect. With this, the thumbnails are black and white, then become colorized as you hover over them. The opposite of this would be the Greyscale effect.

The Scaling Effect used is Zoomed. This enlarges the image within the thumbnail on hover. This works particularly well with the Background Fill feature, which we’ll explain a bit later. The Zoomed effect a bit different to the Scaled effect, which enlarges the entire thumbnail.

Hover effects used in this gallery

We’ve opted to show the caption on hover, but you can make it visible all of the time, or none of the time. As we wanted only the caption to display on hover, we decided not to include a hover icon. The other effects make it clear when you’re hovering over one of the thumbnails, and we didn’t want to crowd the thumb with an icon.

Additional Settings

The above gallery uses the Responsive Image layout, but we’ve made the thumbs a little wider than the default settings as most of the images are landscape. There are also a few other settings that we’ve tweaked for this gallery.

The Lightbox

As with most WordPress photo galleries, this gallery opens the images in a lightbox. We’ve used the FooGallery PRO Lightbox and, to complement the black and white thumbnails, we’ve selected the dark theme. You can see how this looks for yourself by clicking on one of the gallery images. Or, here’s a screenshot:

Colorized hover effect on Foogallery PRO Lightbox

The theme of the PRO lightbox can be set to light, or you can customize it with colors of your choice. Alternatively, you can select Inherit – this will ensure that the theme of the lightbox is the same as the theme you’ve selected in Appearance.

The Colorize effect selected in Hover Effects carries through to the lightbox. So the central image is in color, but the thumbnail strip will be in black and white, and will colorize on hover.

Background Fill

As you can see, the images in the above gallery have a black background, either on the sides or top and bottom. This is achieved by using the Background Fill (No crop) setting available in FooGallery PRO.

With this feature, your thumbnails don’t crop to fit the available space, which leaves gaps around the actual image. You can fill these gaps with a color of your choice – we’ve gone with black in this gallery, as it works well with the Colorize effect.

This feature also works well with the Zoomed Hover Effect. As the images zoom out, the black space is reduced, which makes a bigger impact with the now-colorized image.

The Background Fill effect can be found in the Advanced Settings for FooGallery PRO. Note that you will need to be using GD Image Library for this setting to work.

Wow Factor Galleries

With FooGallery, it’s easy to create a gallery that will wow your visitors. The Hover Effects used are all available in FooGallery Free. The Lightbox and advanced thumbnail fill feature are available in FooGallery PRO.

But whether you’re using the free version or the premium gallery, you’ll still be able to customize your galleries and create a unique look and feel for your photos.

Leave a Comment

Amazing Hover Effects For Your Gallery