Creating Image Zoom Effect Using CSS3 Transitions

August 14, 2014     Nirmal    

You might often want to add some cool hover effects to the images of your website. In this article I would guide you through how you create image zoom effect using css3 transitions. You might also find some jQuery plugins to do the same if you are looking for backward compatibility with Internet Explorer but anyways CSS3 now a days more popular and works with all modern browsers and it will save you from adding/adding long jquery codes to do this.

So here is how you can proceed forward to create the effect. First of all we need an 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"/>
 </div>

Here the .image div just works as a wrapper so that the extra zoomed in part of the can be hidden inside the div. Now let’s write some CSS code to create some 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: hidden;
}

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.

Some awesome text
CSS
Comments

3 thoughts on “Creating Image Zoom Effect Using CSS3 Transitions”

Leave a Reply

0
Connecting
Please wait...
Send a message

Sorry, we aren't online at the moment. Leave a message.

Your name
* Email
* Describe your issue
Login now

Need more help? Save time by starting your support request online.

Your name
* Email
* Describe your issue
We're online!
Feedback

Help us help you better! Feel free to leave us any additional feedback.

How do you rate our support?