Animated WordPress Gallery Links

Animated gallery block tutorial

Turn the regular WordPress gallery block into a series of CSS-animated link-tiles. It’s a fun way to add bling to your site without slowing down the page-load. We’ll set it up so all we need to do is add the “animated-gallery-links” class to any gallery block we want to animate.

Hover your mouse over these

Scaffold the project

The only front-end asset we want in this project is a small CSS file, and we only it to be enqueued on pages where it’s needed. We could enqueue the CSS on every page-load, but that would be lazy and could impair the site’s performance. So we’ll create a small bit of PHP to detect when a gallery block is rendered, and if it has the “animated-gallery-links” CSS class, we’ll enqueue our CSS file.

In your custom child theme, create a file called “wpt-animated-gallery-links.php” and paste the following into it. There’s nothing complicated in here, it’s just a sequence of if...then...else checks followed by a call to wp_enqueue_style() (if all the checks return true).


 * WP Tutorials Animated Gallery Links (WPTAGL)

// Block direct access.
defined('WPINC') || die();

// Add this CSS class to any WP Gallery block you want to animate.
const WPTAGL_CLASS_NAME = 'animated-gallery-links';

 * Detect when a standard WordPress gallery block is rendered with the
 * "animated-gallery-links" CSS class.
 * We don't modify the rendered content here - just enqueue our CSS file.
function wptagl_render_block(string $block_content, array $block) {
	global $wptagl_are_assets_enqueued;

	if (!is_null($wptagl_are_assets_enqueued)) {
		// Our stylesheet has already been enqueued,
		// so we don't need to run any of these checks.
	} elseif (is_admin() || wp_doing_ajax()) {
		// We're not in the front-end. Don't do anything.
	} elseif ($block['blockName'] != 'core/gallery') {
		// This isn't a WP Gallery block.
	} elseif (!array_key_exists('attrs', $block)) {
		// The gallery block has no attributes.
	} elseif (!array_key_exists('className', $block['attrs'])) {
		// The className attribute is not specified.
	} elseif (empty($class_name = $block['attrs']['className'])) {
		// The className attribute is empty.
	} elseif (empty($gallery_classes = array_filter(explode(' ', $class_name)))) {
		// The className attribute is empty.
	} elseif (!in_array(WPTAGL_CLASS_NAME, $gallery_classes)) {
		// "animated-gallery-links" isn't in the list of CSS Classes.
	} else {
		$theme_version = wp_get_theme()->get('Version');
		$base_uri = get_stylesheet_directory_uri();

			$base_uri . '/animated-gallery-links.css',
			null, // No dependencies

		$wptagl_are_assets_enqueued = true;

	return $block_content;
add_filter('render_block', 'wptagl_render_block', 10, 2);

Next, we need to edit your child theme’s functions.php and add the following couple of lines:

// WP Tutorials : Animated Gallery Links
require_once dirname(__FILE__) . '/wpt-animated-gallery-links.php';

Finally, create a file in your child theme called “animated-gallery-links.css” and add the following, to get scaffold the styles.

 * WP Tutorials Animated Gallery Links (WPTAGL)

.animated-gallery-links {
	margin-bottom: 1.5em;

.animated-gallery-links .wp-block-image {
	position: relative;
	overflow: hidden;

.animated-gallery-links .wp-block-image a {
	position: relative;
	display: block;

Create a gallery block

Before we can add the actual CSS rules, create some content and add a gallery block with some images in it.

Select the gallery block (not any of the image blocks) and set the CSS Class to “animated-gallery-links”, under the “Advanced” tab.

For each image in the gallery, add a caption (to act as the link text) and set the target URLs for when each image is clicked.

Animated WordPress gallery links
Add a CSS class to your gallery
Create a gallery block with captions and links
Create a gallery block with captions and image-links

Build the CSS animations

Now we can start on the fun stuff – creating the CSS animations in “animated-gallery-links.css”. Add the following to apply styles to the image captions, and animate them when the images are hovered.

 * Configure and animate the image captions when hovered.
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image figcaption {
	background: transparent;
	font-size: 100%;
	font-weight: 900;

		-1px -1px 2px #000,
		1px -1px 2px #000,
		-1px 1px 2px #000,
		1px 1px 2px #000;

	position: absolute;
	text-align: left;
	transition: 0.3s bottom, 0.3s transform;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1em;
	bottom: 1em;
	pointer-events: none;
	line-height: 1.3em;
	z-index: 20;

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover figcaption {
	bottom: 50%;
	transform: translateY(50%);

All this does is set some styles for the figcaption element, then changes its vertical position when the mouse hovers over the image.

To zoom/scale the image when hovered, add this chunk to the CSS file:

 * Zoom in on the image when its hovered hover.
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image img {
	transition: 0.3s transform;

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover img {
	transform: scale(1.2);

The following snippet adds a semi-transparent overlay when hovered.

 * Create a totally transparent overlay for the image, then make it
 * semi-transparent when the image is hovered.
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image a::before {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	transition: 0.3s opacity;
	background-color: black;
	opacity: 0.0;

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover a::before {
	opacity: 0.5;

The final chunk adds an arrow that appears when the image is hovered. We’ve used Font Awesome 5 for the arrow, but you can use anything you want – or just don’t add this chunk if you don’t want the arrow to pop-up.

 * Create an animated arrow that comes into view when the image is hovered.
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image a::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
	content: '\f061';
	position: absolute;
	left: 0;
	bottom: 2em;
	color: #ADF5FF;
	opacity: 0.0;
	transition: 0.3s left, 0.3s opacity, 0.3s transform;
	transform: scale(0.5);
	z-index: 20;

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover a::after {
	bottom: 2em;
	left: 1.2em;
	opacity: 1.0;
	transform: scale(1.5);

And there we have it – a lightweight hack for the standard WordPress gallery block 😎👍

Featured plugin

Product Variation Pills for WooCommerce
Replace the WooCommerce product variation drop-downs with user-focused, mobile-friendly radio/pill buttons. Create a cleaner product page and boost the user experience of your store!
Product radio buttons for WooCommerce

Like This Tutorial?

Let us know

WordPress plugins for developers

Leave a comment