How to Smoothly Zoom Images on Mouse Hover Using CSS3?

0

How-to-Smoothly-Zoom-Images-on-Mouse-Hover-Using-CSS3
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. Below are some other features that you got while using it.

  • 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.

Image Zooming Effect

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;
}

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.
We hope this method will help you to zoom images on mouse hover because we have explained everything with fully detail. If you faced any problem or you have any question then feel free to share your thoughts in comment section and stay tuned us for upcoming widgets and tutorials.

You might also like More from author