Creating Image Zoom Effect Using CSS3 Transitions

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="https://www.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
  • Desmond Chambers

    is there a way to do this with fluid images? like photos of faucets

    Posted On: October 24, 2015

    […] Using migrations, seeding, routes, controllers, and views, we’ll walk through the entire process. This tutorial will walk us through: Creating a users table using migrations Filling our new users table with sample users using seeding Using the great artisan command line tool to migrate and seed Creating a login form and processing a login using routes, controllers, and views Handling login errors Use Eloquent ORM to validate a user Getting our Database Ready To get our authentication working, we will need to have a database and users to login with. Database Setup Set up your database and user. Migrations. Laravel Schema Designer. Bootstrap Glyphicons v3.2.2. Pages Url. Creating Image Zoom Effect Using CSS3 Transitions – MagniGenie. […]

    Posted On: June 25, 2015

Leave a Reply