0Wordpress LogoShow enlarged image on hover in wordpress

As part of the recent improvements I’ve been making to various websites I wanted to make images in galleries show enlarged versions when hovered over. Doing this with basic CSS is fairly trivial, but I didn’t just want to expand the original image, I wanted the browser to grab a new (larger) image too…

All of the images are already providing a full src-set so all I needed to do was to use a little jQuery (which is already loaded by wordpress anyway) to change the target display size to make the browser pull a larger image. The nice thing is that the CSS works instantly so you get a larger image using the original file, and then the quality improves a split second later as the higher res file gets loaded.

The CSS

The CSS I used is as follows. I simply added this to the style.css of my theme (or rather child-theme – always a good idea to use one)

dt.gallery-icon a img.size-thumbnail:hover
{
transform: scale(3.0);
}

Note (1) – the above CSS applies to gallery images only. It is unlikely anyone would want this functionality for all images displayed anywhere on the page, but you might want it for the main content section. You would need to check how your theme structures this, but in my case the main content area is a “section” so the following code would do the job

section.entry-content p a img.size-thumbnail:hover
{
transform: scale(3.0);
}

Note (2) – This code applies only to thumbnail images. For medium images you would replace “size-thumbnail” with “size-medium”, and for large with “size-large”.

Note (3) – Because my thumbnails are 120x80px I want to increase them to 3x their original size. I already have a custom image size of 360×240 that wordpress creates for me that is included in the src-set. For hi-dpi screens there are also even larger image sizes that I have (e.g. 720×480). Creating additional image sizes in wordpress is easy – there are lots of good guides online if you need to do this.

If you wanted to scale to 1.5x or 2.0x simple change the 3.0 as desired

The jQuery

Add the following to your (child) theme’s script file (assuming it has one). If it doesn’t have one, create your own, and ‘enqueue’ it with a custom function in the (child) theme’s functions.php

jQuery(document).ready(function(){

  jQuery("dt.gallery-icon a img.size-thumbnail").hover(function(){
    jQuery(this).attr("sizes","(max-width: 360px) 100vw, 360px");
    }, function(){
    jQuery(this).attr("sizes","(max-width: 120px) 100vw, 120px");
  });

  //repeat the above 5 lines here for each different image size you want to modify

});

The above code is applying to images with class thumbnail that are found inside any dt with a gallery-icon class – so in otherwords – only to images inside the wordpress built-in gallery structure. On hover the max-width is increased from 120 to 360 (a 3x increase to match my CSS!), and then the second part of the function restores the original 120 width when the hover stops.

As with the CSS above, you can adjust the numbers to change how much the image enlarges, and you can change the dt.gallery-icon a img.size-thumbnail section to target a different element or class depending on which images you want to target.

Enqueue your own script

If your theme didn’t have a script file and you need to enqueue your own add the following to your (child) theme’s functions.php (assuming you called your script file image-zoom.js and saved it in the root folder of the theme)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', array( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

The above will register your script, in the footer, making sure it is placed after jquery (so jquery should already be available when it executes)

Adding image sizes

For completeness here’s how to add custom image sizes to wordpress. Again, add this to your (child) theme’s functions.php

add_image_size( 'quarter-width', 192, 144, false );

Above I’ve added a new image-size called “quarter-width” with a maximum width of 192px and a maximum height of 144px. The image will not be cropped (hence the false at the end).

WordPress will now create images of this size automatically when you upload images (you will need to use a thumbnail rebuild plugin to recreate the thumbnails for already-uploaded images).

This new image size will NOT show up for insertion in the editor though. To make it available also add the following code to your functions.php

function my_custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'quarter-width' => __('Quarter Width'),
    ) );
}

Respecting existing settings

One more thing that you might want to do (to ensure responsive images work well) is to create larger (i.e. hi-dpi) thumbnail sizes that respect the GUI of whether to crop thumbnails or not. To do that use the code below which as you will see is slightly modified from the more basic one above

add_image_size( 'resp-thumb-2x', (get_option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_option( 'thumbnail_crop' ) );

The above code checks for 2 things – firstly it checks to see if the crop option is set, and if it is, it mirrors it for our new responsive size. It also checks to see if the width is set to 0 (i.e. no maximum) in which case our new image will also have no maximum either. I called the new image size “resp-thumb-2x” as it is a ‘responsive’ copy of the thumbnail that is twice as large (for hi-dpi screens with double the normal pixel density). I have also created a number of other sizes to make a fairly complete set.

Note – Since my original thumbnails were 120×80 I want my new ones to be 240×160 so those are the sizes I have specified (hard-coded). It would be possible to get both the height and width specified for the original thumbnail and multiply both by 2 to make this function fully generic, but I didn’t do so when I was developing it so I will leave that to you to figure out!

One final tip

If, like me, you create your own full set of new image sizes, you may not want wordpress to create it’s own extra hidden sizes. In addition to the original image, and the thumbnail, the medium, and the large image, wordpress also create a “post-thumbnail”, a “medium-large”, a 1536×1536 and a 2048×2048. These are disabled in 2 different ways…

To remove the 1536 and 2048 images is straight-forward

remove_image_size( '1536x1536' ); //remove the 1536 we dont need it
remove_image_size( '2048x2048' ); //remove the 2048 we dont need it

The post-thumb and medium-large are slightly more complicated

//remove the built-in medium-large
add_filter('intermediate_image_sizes', function($sizes) {
    return array_diff($sizes, ['medium_large']);
});

//remove the built-in post-thumbnail
add_filter('intermediate_image_sizes', function($sizes) {
    return array_diff($sizes, ['post-thumbnail']);
});

Note that removing the post-thumbnail seems to sometimes have strange effects on the image library in the editor.

One final final note

When deciding on image sizes (for larger images, less so thumbnails) you ideally want a size that common aspect ratio images will always resize nicely to. For that reason I recommend the following sizes

SizeWidthHeight (4:3)Height (16:9)Height (3:2)
Quarter192144108128
Third288216162192
Half384288216256
Medium576432324384
Full768576432512
Large1152864648768
XL153611528641024

Note how the widths specified produce whole number heights for all 3 of the most common aspect ratios. You won’t get that with widths like 150 or 200.

Also note the pattern in increases. Jump 2 rows in the table and the size doubles! The even rows (288,576,1152 and 1535) are also 1.5x the previous size so these work well on semi-hi-dpi screens using a 50% dpi increase. By using this set of 7 sizes you have a good range of usable options for most viewports AND a good set of responsive images that wordpress will automatically add to the src-set since they will have consistent aspect ratios with no fractions that would lead to quality loss or cropping.

Currently for thumbnails I tend to either have unlimited width allowed OR I hard crop to a fixed 3:2 ratio so I use whole number sizes for thumbnails but I may eventually tweak my theme and extend the above system backwards by having options 48px and 96px wide (note there is no value between these 2 that would work unfortunately – and since I use 60px wide mini thumbnails I haven’t opted to extend backwards). 72px would work for both 4:3 and 3:2 (and 64px would work with 4:3 and 16:9). Since a majority of my images are taken on my dSLR these are typically 3:2 (the same as the aspect ratio of traditional 35mm film) so I could use this size as well, which would then work with the large sizes all the way up, but the larger sizes are not cropped whereas my thumbnails are – I’m happy for larger images to be both landscape and portrait, but I want thumbnails to typically be landscape only to fit with my design, so that’s why I haven’t extended backwards. Hopefully as more and more logos are available as SVG’s, and once JPEG-XL arrives in browser in the near future, a lot of this will be resolved.

What do you think? Drop us a comment below! If you would like to subscribe please use the subscribe link on the menu at the top right. You can also share this with your friends by using the social links below. Cheers.

Leave a Reply