you're reading:
CSS editing, Hover effects, Images, Mouseover effects, Rollover effects

Zooming images

If you have the Custom Design upgrade, you can easily create thumbnails that zoom to full size when you hover over them.

CSS editor

Add this:

.zoom {
width: 25%;
-webkit-transition: width 1.4s ease-in-out;
-moz-transition: width 1.4s ease-in-out;
-o-transition: width 1.4s ease-in-out;
transition: width 1.4s ease-in-out;
.zoom:hover {
width: 100% !important;

Change the percentage, to adjust the default width for such thumbnails.

The transition property is used to make the thumbnail zoom gradually (note: this won’t work in IE9 or earlier). Change the number, to adjust the duration of the transition.

Post or page editor

Upload and insert the image the normal way, selecting the full size option. (Naturally, the image you upload needs to be as wide as the main column of the theme you’re using, or wider.)

Delete the width and height from the image code, and add “zoom” to the image classes. In other words, turn the image code to this:

<img src="IMAGE URL HERE" alt="DESCRIPTION HERE" class="zoom ETC ETC" />

If you need to insert such thumbnails at varying widths, add the style attribute as well (change the percentage to adjust the width):

<img style="width:25%;" src="IMAGE URL HERE" alt="DESCRIPTION HERE" class="zoom ETC ETC" />

For a live example see this demo post. [Sorry, upgrade on that blog has expired]

Please don’t paste code in comments – see comment guidelines.


5 thoughts on “Zooming images

  1. Does it work if I don’t buy Custom Design package? Do you have any workaround with this awesome trick? :D

    Posted by Cyan Wind | July 2, 2013, 10:54
  2. No, it’s not possible without the upgrade.

    Posted by Panos | July 3, 2013, 03:25
  3. This is really cool. Do you know of anything like it (or like your mouseover popup) available as a plugin for a self-hosted wordpress blog?

    Posted by rhysludlow | July 8, 2013, 22:01
  4. Sorry, I don’t have any experience with self-hosted blogs. You can search here, and you’ll probably find more interesting effects:

    Posted by Panos | July 10, 2013, 03:45


  1. Pingback: Zooming images | WarWebDev - March 15, 2014


author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.


  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: