How to create the zoom effect in CSS for an image?

Last updated : 2023-10-29

The zoom effect is a popular technique in web design that allows highlighting key elements on the page by applying a scale increase when the cursor hovers over them. In this article, we will explore how to implement this effect using only CSS.

Basic HTML

Before we dive into the styling, we need to have the basic HTML in place. It's best to use a simple structure like the following:

html

<div class="item">
  <img src="image.png" alt="Image description" />
</div>

Here, we have wrapped all the content in a container div and given it a class for easy styling. Within the container, we have an individual item that includes an image, a title, and a description. This is the element we want to animate with the zoom effect.

Basic Styling

To achieve the zoom effect, we need to apply a CSS transformation to the element when the cursor hovers over it. To do this, we first need to set the initial CSS properties for the element:

css

.item {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
  margin: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

Here we have created basic styling for the element we want to animate with the zoom effect. We have set some common styles such as width, height, box shadow, and rounded borders to give the element an appealing appearance.

Adding the Zoom Effect

To add the zoom effect, we need to apply a CSS transformation to the image when the cursor is placed over it. To do this, we can use the :hover pseudo-selector to apply the style only when the cursor is over the image. Let's add the following CSS code below the base style:

css

.item img:hover {
  transform: scale(2);
}

Here, we are using the transform: scale() property to increase the size of the image by 100% when the cursor is placed over it. This creates the zoom effect we were looking for.

By using the styles and techniques described here, you can easily add the zoom effect to your own web page and enhance the user experience by highlighting important elements.

Example of Zoom Effect on an Image in CSS

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me