Smooth Image Zoom on Hover with Pure CSS Transition

Create Amazing Image Zoom on Hover Effect with CSS

Today I will guide how to create Zoom Image effect on hover with the help of pure CSS.  The Zoom Transition allows us to make the image more broad view.

There are numerous ways you can add a special effect to your different web page elements. Such effects make your site layout stunning and appealing.

To create this Zoom effect, We will take help of CSS3 transitions and transform property. The transition will make the effect nice and clean wherase the transform help us to enlarge the image when mouse hover the image.

Let’s bit talk about the zoom property. The zoom assets in CSS lets you scale your content. It was far non-popular and was formerly carried out handiest in Internet Explorer.

Although several different browsers now support zoom. But it isn’t endorsed for production websites. We define the zoom as following.

.zoom {
  zoom: 100%;
}

The zoom support different values. Here are supported values.

Percentage – Scale by this percentage
Number – Convert to percentage and scale – 1 == 100%; 1.5 == 150%;
Normal – zoom: 1;

The CSS Zoom is an old internet explorer thing. It isn’t always something you should use on live sites. In case you want to scale content, use CSS Transforms. You can also use filters if you need old IE support.

Now back to our main topic. We are going to build two different types of zoom effect for images.

  • Simple Zoom Effect
  • Zoom Image Mover Effect

How to Create Image Zoom Effect on Hover

First of all, we will take a look HTML Markup that is pretty much straightforward and easy. We just need to define a div class name zoomImage and place image inside it. Here is you can take a look.

<div class="zoomImage">
  <img src="image/zoom4.jpg" alt="" />
</div>

The Zoom Style

The CSS is nothing very special but has few factors that need to take a look. We need to set the width and height of the main div and then make sure to hide the overflow.

The width/height isn’t necessary and no need to add when you are making your design responsive. You can take a look at our demo and download code for working examples.

.zoomImage {
    border:10px solid #fff;
    outline:1px solid #ccc;
    width: 900px;
    height:530px;
    overflow: hidden;
    margin:0 auto;
}

Similar to the main div, we need to set width and height for the image too. Also, we will use the CSS transition property. We had used this feature before in my one of CSS tutorial called CSS Flip Animation on Hover that you can take a look for further details.

.zoomImage img {
    width: 900px;
    height:530px;
    max-width: 100%;
    height: auto;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}

We are almost done here with Zoom effect and just need to add CSS property transform with the transition on hover of the image.

.zoomImage img:hover {
  -moz-transform: scale(2) rotate(0deg);
  -webkit-transform: scale(2) rotate(0deg);
  -o-transform: scale(2) rotate(0deg);
  -ms-transform: scale(2) rotate(0deg);
  transform: scale(2) rotate(0deg);
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  -ms-transition: 0.8s;
  transition: 0.8s;
}

Zoom Mover Effect

In this method, we will use some grid that allows viewing the more area of the picture. While creating this, we need to add additional divs. First, we will define the main container div and then place the grid divs inside it. In the end, we will put our image. Here is what I am talking about:

<div class="zoomMover_wrap">
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <div class="grid_pattern"></div>
  <img class="zoomEffect" src="img/zoom3.jpg" alt="placeholder image"/>
</div>

For CSS, we used flexbox property of CSS for the main container grid and made it’s overflow hidden. Additionally, we also set position to relative.

.zoomMover_wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 400px;
}

Our grid pattern divided into equal width/height, and we keep each grid pattern to be 20%. But on hover, this width/height will be changed to 150%, so it allows user to view more part of the image.

.grid_pattern {
  height: 20%;
  width: 20%;
}
.grid_pattern:hover ~ img {
  height: 150%;
  width: 150%;
}

Next, we will use nth-of-type CSS property for the image.

.grid_pattern:hover:nth-of-type(5n + 1) ~ img {
  left: 0px;
}
.grid_pattern:hover:nth-of-type(1n + 1) ~ .zoomEffect {
  top: 0px;
}
.grid_pattern:hover:nth-of-type(5n + 2) ~ img {
  left: -50px;
}
.grid_pattern:hover:nth-of-type(1n + 6) ~ .zoomEffect {
  top: -50px;
}
.grid_pattern:hover:nth-of-type(5n + 3) ~ img {
  left: -100px;
}
.grid_pattern:hover:nth-of-type(1n + 11) ~ .zoomEffect {
  top: -100px;
}
.grid_pattern:hover:nth-of-type(5n + 4) ~ img {
  left: -150px;
}
.grid_pattern:hover:nth-of-type(1n + 16) ~ .zoomEffect {
  top: -150px;
}
.grid_pattern:hover:nth-of-type(5n + 5) ~ img {
  left: -200px;
}
.grid_pattern:hover:nth-of-type(1n + 21) ~ .zoomEffect {
  top: -200px;
}

We will set the position: absolute; and used transition for a picture. Here we will also set some background color for even/odd items.

.zoomEffect {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  width: 100%;
  z-index: -1;
}
.grid_pattern {
  background-color: rgba(48, 197, 255, 0.25);
}
.grid_pattern:nth-of-type(2n) {
  background-color: rgba(186, 59, 70, 0.25);
}
.zoomMover_wrap {
  margin: 0 auto;
}

That’s Ended. Now you can just take our source code and implement into your project building. But don’t forget to leave feedback and sharing with your friends.

Code ExamplesYou May Also Like