Today I will guide how to create CSS Zoom Image effect on hover with the help of pure CSS Transition. 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.
With the help of the “Zoom” property we can easily create the effect and by adding transitions and transform elements we can also create CSS Image Zoom In & Out Effect on Hover.
The transition will make the effect nice and clean whereas the transformation helps us to enlarge the image when the mouse hovers over the image.
Smooth Zoom Transition with CSS
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 follows.
.zoom {
zoom: 100%;
}
The zoom support different values. Here are the 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 effects 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 at HTML Markup which is pretty much straightforward and easy. We just need to define a div class name zoomImage and place an image inside it. Here you can take a look.
<div class="zoomImage"> <img src="image/zoom4.jpg" alt="" /> </div>
The Zoom Style
The CSS is nothing but very special and has few factors that need to take a look at. 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 the 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 the width and height for the image too. Also, we will use the CSS transition property. We had used this feature before in one of the CSS tutorials called CSS Flip Animation on Hover 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 the 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 a grid that allows viewing 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 the flexbox property of CSS for the main container grid and made its overflow hidden. Additionally, we also set the 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 is divided into equal widths/heights, and we keep each grid pattern to 20%. But on hover, this width/height will be changed to 150%, so it allows the 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 use transition for a picture. Here we will also set some background colors 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 it into your project building. But don’t forget to leave feedback and sharing with your friends.