Creating Image Zoom Effect Using CSS3 Transitions

James

August 14, 2014

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.

[html]
<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>
[/html]

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.

[css]
.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;
}
[/css]

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

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

  1. […] 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. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

We trade to make your work effortless, Subscribe our newsletter to stay updated.

We respect your security and won’t disclose your email to anyone.
Experience remarkable WordPress
products with a new level of power,
beauty, and human-centered designs.
© Magnigenie - All Right Reserved 2023
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram