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]

https://wpbtips.wordpress.com/