Introduction:
In this tutorial, you’ll learn how to create a simple zoom-in effect on an image when a user hovers over it. This effect is perfect for displaying products, photographs, or any other visual content you want to showcase. The effect adds a layer of interactivity and a professional look to your website without using JavaScript. Let’s dive into the steps to create this effect using only HTML and CSS.
Things You Will Learn:
- Setting up a zoom-in effect using CSS
- Using the
backgroundproperty to display an image - Creating interactive elements with
cursorstyling - Adding smooth transition effects for a better user experience
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ‘Image Zoom Effect’. Inside this folder we have 2 code files and an image file. These files are :
- index.html
- style.css
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Zoom Effect</title>
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="image"></div>
</body>
</html>
CSS:
Let’s add some style to the layout. Copy the code provided and include it in your stylesheet.
.image {
height: 500px;
width: 500px;
background: url(camera.png);
cursor: zoom-in;
background-position: center;
}
.image:hover {
background-size: 120%;
}
Conclusion:
In this tutorial, you created a clean, zoom-in effect on hover using only HTML and CSS. This technique allows you to add interactive, visually appealing elements to your website. This zoom-in effect is a simple yet effective addition to any web project. Happy coding!
