In CSS, you have got many option to do as the same work as JQuery do. You have seen in many site that when you move your mouse on images then it smoothly zooming in without increasing the Image DIV size and when you move your mouse out then it smoothly zoom out to its original position. Yes, that was done with JQuery before now you can do it using pure CSS3 only.
Your images will be zoom in using a CrossBrowser CSS smothily and zomm out also having the same feature, for this you dont have to edit your images HTML codes all around the website but you can do it by editing just your CSS file. Now without any more preface, check out the source code and live DEMo then do it now.
Table of Contents
Features:
1.) Pure CSS3 Code.
2.) No JQuery.
3.) No JavaScript
4.) Image will be zoom on mouse hover.
5.) Zooming effect will be smooth.
6.) Image will not expand on your page or mess up the layout.
How To Smoothly Zoom Images On Mouse Hover Using CSS3?
Step 1:) First of all go to your website and see that do you have images in this kind of HTML or add a new image just as below.
<div class="zoom-image"> <img src="image.jpg"/> </div>
Step 2:) Now edit your CSS file or <head></head> section to add below CSS.
<style type="text/css">
.zoom-image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
max-width:100%;
}
.zoom-image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
.zoom-image {
max-width:100%;
width:400px;
overflow:auto;
}
</style>Step 3:) Rest save it and its done.
Customization:
You have to just change the width according to your desired image DIV. Rest you can also change CSS class as per your pre added images…
Last Words:
This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.
thanks for sharing this great article
Welcome here and thanks for liking our article. Stay with us to get more like this…
Great post! liked and tired it.
works perfectly. would use in my future projects.
Thank for sharing.
Welcome here and thanks for liking our article. Stay with us to get more like this…