Creating Image Zoom Effect Using CSS3 Transitions. You may often want to add some cool hover effects to images of your website. This article would guide you through how to create image zoom effect using CSS3 transitions. You can also find some plugins jQuery to do the same if you are looking for compatibility with Internet Explorer, but anyway CSS3 now most popular day and works with all modern browsers and it will save from the addition / adding jquery codes long to do this.

So here it is how you can proceed forward to create the effect. First, we need a element on which you want to apply the code/css.


<div class="mg-image">
   <img src="http://magnigenie.com/wp-content/uploads/2014/02/1366x768-abstract-inspire-colorful-hd-wallpaper.jpg" alt="Some awesome text"/>

Here the image Div .Image here just works as a kicker so the extra zoom in a part of can be hidden inside the div. Now let’s write some CSS code to create a cool effect.


.mg-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%;
}
.mg-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);
}
/* just apply some height and width to the wrapper.
.mg-image {
width:400px;
height:400px;
overflow: auto;
}

Now we are all set and our cool image zoom effect is created. Don’t believe it? Then move your mouse over the image below and check it out yourself.