How to Smoothly Zoom Images on Mouse Hover in blogger

You may have seen this feature in many websites, where you just mouse hover on image and the image will zoom automatically and when you move your mouse then it will be smoothly zoom out to its original size. This is one amazing trick and many people are crazy to know about it that how it works and how they can easily integrate it to their websites.

Previously we was done it by using JQuery that was help us to zoom images on mouse hover but you know that JQuery coding is little bit affect on our website loading speed and some time our website may take some time in loading that affect on our website ranking, so for this purpose today we will show you a method to add it in your blog by using CSS3.
Features of Using CSS3
There are different features that we get while we use CSS3 in this method because it will not affect on our website speed and our posts and pages load faster.

Features

-Pure CSS3 Codes
-Image will be zooming out on mouse hover
-Zoom Affect will be fully smooth
-Images will not disturb the appearance of your layouts.
-No JQuery Codes
-No JavaScript Codes

Here is a live demo of it, simply hover your mouse on below image and then see the magic.

How to Zoom Images or Photos on Mouse Hover?

We have divided this tutorial in two steps and in first step we will show you a method to add CSS3 coding in your template and in second step you can learn a method to display your images in posts and pages.

Step#1

-Go to Blogger Dashboard>> Template>> Edit HTML.
-Find below code in your template.

]]></b:skin>

-Paste the following code above it.

.zoom-image img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;max-width:100%;}.zoom-image:hover img {-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25);}.zoom-image {max-width:100%;width:400px;overflow:auto;}

-Now simply click on “Save Template” and go ahead.

Step#2

-Go to Blogger Dashboard>> Post Editor and Move to HTML mode.
-Paste either of the following code, where you want to display your images.

<div class="zoom-image"><img src="your-image-url"/> </div>

<a class="zoom-image" href="your-image-url"><img src="your-image-url"/></a>

-Replace your-image-url with any image URL that you want to display.
-After making your desired changes, simply click on “Publish” post and you’ve successfully done it.

All done

You May Also Like