Animated GIF Hover Images

What a GIF hover image does

A GIF dropped into a post starts playing the moment the page loads, and a page full of them all loop at once. Hover media works the other way round. Every item in a Visual Portfolio gallery holds two pictures. The still one sits in the grid. The plugin swaps to the second while the pointer is over that item, cross-fading between them, and an animated GIF restarts from its first frame on every entry. The gallery above has Click Action set to Disabled, so hovering is all an item responds to.

The alternative goes in the same slot. Pick a local video file instead of a GIF and it plays on hover, then pauses when the pointer leaves, which is what the video gallery demo uses. A two second loop is easier to keep as a GIF than to encode. Anything longer belongs in an mp4, because the plugin serves animated GIFs at full size.

What the hover slot accepts

Hover media sits behind a Normal / Hover toggle at the top of an image’s settings in the Media content source. Switch it to Hover and the fields underneath describe the second picture.

• An image or a local video file. With Pro the Media Library picker takes sixteen video types, mp4, webm, mov and m4v among them.
• Its own focal point, so it crops around a different part of the frame than the still one.
• Post based grids too. A project’s sidebar carries Custom Media with the same two tabs.
• Full size delivery for GIFs. Ordinary images are registered as Small, Medium, Large and Extra Large (VP) at 500, 800, 1280 and 1920 px, and srcset picks one.
• Nothing at all on touch screens. There is no pointer, so the normal media stays.
• A slide in the lightbox, if you want one. Display Image Priority sorts Custom Popup Image, Custom Image, Default Image and Hover Image. The last sits outside the default order and counts only when the hover media is an image.

Adding a hover GIF to a gallery

1. Add the Visual Portfolio block, choose Media as the content source and click Add Media. Pick the still images or upload them. They appear under the button eighteen at a time, and you drag them to reorder.
2. Click one of those images to open its Media Settings. Switch the toggle at the top from Normal to Hover and pick the GIF. Do it again for every item that needs motion. The ones you skip stay still.
3. Pick the skin and the click behaviour. This demo uses the Fade skin with the title and categories hidden. Outside the block editor, save the gallery as a Saved Layout and pick it in the Elementor widget or the WPBakery element.

The part you pay for

Most of the gallery above is free. The second image per item is the part behind the license. Pro carries the free plugin inside it, so there is only ever one plugin to install. The whole split is on the Free vs Pro page, and the license tiers are on pricing.

• The Gallery block, the Media Library source, the Grid layout and the Fade skin are free.
• So are the hover overlay, the filter, pagination and the lightbox.
• Hover media is Pro. So is Custom Media on a project, which carries the same Normal and Hover tabs.
• Local video items that play inside the grid are Pro, and so is the custom image the lightbox can show instead.

Questions about hover GIFs

Can I show an animated GIF on hover?

Yes, with Pro. Set the GIF as an image’s Hover media in the block, or on the Hover tab of a project’s Custom Media when the grid is built from posts. It restarts on every pointer entry rather than looping unseen. The short version is in can I show an animated GIF on hover.

Why do hover effects not work on my phone?

A touch screen has no pointer, so the normal media stays and the GIF never runs. Captions hit the same wall. Setting Overlay Display to Always keeps the text visible, and Pro adds Move Overlay Under Image, which drops it below the picture on small screens. See why hover effects do not work on a phone.

Does the plugin support WebP and AVIF?

Any format WordPress accepts is shown as uploaded. The WebP conversion plugins, Imagify, EWWW, ShortPixel and LiteSpeed, work with the four gallery image sizes. Animated GIFs are the exception, since they go out at full size, so a heavy GIF stays heavy. Pro watermarks are generated for JPEG, PNG, GIF and WebP originals, not for AVIF or SVG, as the format answer explains.