Table of Contents
- HTML to create Image Hover Effect (index.html)
- UnSplash API:
- Create Image Zoom Hover Effect in CSS (styles.css)
- Video Tutorial
- You may also like
- Subscribe YouTube Channel For More
Did you know creating wonderful and smooth image hover zoom effect is this easy? Have a look into the demo here…
HTML to create Image Hover Effect (index.html)
The layout for this project is very simple. We have a series of images inside div with “image” class wrapped inside a “images-container” class. Also notice, we are not using downloaded images. In fact, we are using UnSplash API to fetch images e.g., https://source.unsplash.com/random/300×300 will generate a random image of size 300×300. To generate other random images, you can change the size by 1 or 2 pixels.
UnSplash API:
https://source.unsplash.com/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Image Zoom Hover Effect</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="images-container">
<div class="image">
<img src="https://source.unsplash.com/random/300x300">
</div>
<div class="image">
<img src="https://source.unsplash.com/random/300x301">
</div>
<div class="image">
<img src="https://source.unsplash.com/random/300x302">
</div>
</div>
</body>
</html>Create Image Zoom Hover Effect in CSS (styles.css)
The styling is also basic. There are some points that needs to be noted to make sure your hover effect is smooth. The first one is the overflow: hidden set to .images-container .image. You need to make sure the overflow is set to hidden. When we scale the image on hover i.e., tranform: scale(1.2) for .images-container img:hover, the image can come out of the container. By setting the overflow to hidden, the image will stay inside the container and any section of the image outside the container will be hidden.
To make the hover effect smooth, use transition CSS property.
.images-container {
display: flex;
width: 100%;
gap: 1rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.images-container .image {
width: 200px;
height: 200px;
overflow: hidden;
}
.images-container img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: 0.3s;
}
.images-container img:hover {
transform: scale(1.2);
}