How to add Image Zoom on Hover using Html and CSS
Today we are looking for Image zoom on hover. It means when you take your cursor over the image it will zoom. Let’s see how can we do it to your images.
Firstly you have to open your editor. And You have to write your code as below. This is very simple and you can understand it very easily.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<img src="1.jpg">
</div>
</body>
</html>
Here I created index.html as my Html file. Then I add an Image tag within a div tag in the body of the Html page. When you adding images for your project you must add them within the same folder where your Html and CSS files are located. Then, I define the container class.
Moreover, I create a CSS file to add properties and values to my HTML tags. Then I connect both Html and CSS files as below link tag in the <head> tag of the Html file.
<link rel="stylesheet" type="text/css" href="style.css">
Let’s build up our CSS file. Please follow me.
body
{
margin: 0;
padding: 0;
}
.container
{
width: 600px;
height: 500px;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
}
Here I add width and height properties to my container class. And I set position value as absolute, An element with position: absolute, It is positioned relative to the nearest positioned parent. Here I used to translate(x,y) method, It moves an element from its current position. This div element is moved to the center of the page.
CSS overflow property
Here I used overflow property. It defines what happens if content overflows an element’s box. we can use this property to clip content or to add scrollbars, which contain big content to fit in a specified area. This overflow property only can use for block elements with a mentioned height. I define property value as hidden because I want to clip overflow, and the rest of the content invisible.
Moreover, you can view the below output after adding the above properties to your container class.
Transform property to get image zoom on hover
Then we see how to add transform property.
.container img
{
transition: .5s all ease-in-out;
}
.container:hover img
{
transform: scale(1.5);
}
I Used ease-in-out value for transition property. Because the default transition timing function in CSS is ease. ease-in-out, change happens slowly both at the starting and the end and speeds up only in the middle. It has soft edges.
Here I add a hover effect to the container. It means when you move your cursor to your target element and how it would be changed. Here I used transform property and value as scale.
Scale efforts like you would zoom in and out the pointed element. Its default value is one, which works as a multiplier of the original size of your element.
Now I think you got a clear idea about how to create an image zoom on hover for your web page. Just take a try to do this. It will improve your skills definitely. Please stay tuned with Maztars to know more. Thanks a lot and see you at the next lesson.
