HomeCSSImage Zoom Effect With CSS

Image Zoom Effect With CSS

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 background property to display an image
  • Creating interactive elements with cursor styling
  • 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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

four + twelve =

Most Popular