Subscribe

Creating a Parallax Zoom Effect with HTML & CSS

Creating interactive elements in web design is a great way to enhance user experience and engagement. A parallax zoom effect can add a level of dynamism and visual interest to any image gallery. In this tutorial, we’ll walk you through the code to create this effect using HTML and CSS.

Step 1: HTML Setup

To begin, let’s look at our HTML structure. We’ve designed a simple image gallery containing three images. This is achieved by using an img tag for each image, all enclosed within a div classed as “image-gallery”.

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Image Zoom Gallery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="image-gallery">
    <img class="image" src="image1.jpg" alt="Image 1">
    <img class="image" src="image2.jpg" alt="Image 2">
    <img class="image" src="image3.jpg" alt="Image 3">
  </div>
  <script src="script.js"></script>
</body>
</html>

Please replace image1.jpg, image2.jpg, and image3.jpg with the paths to your own images.

Step 2: CSS Styling

The real magic happens within our CSS. The design ensures that the images are displayed in a row, and that they enlarge when hovered over.

html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.image {
  width: 300px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s;
}

.image:hover {
  transform: scale(1.2);
}

The CSS applies a flex display to both the body and .image-gallery to center our images both vertically and horizontally on the page. The gap property in .image-gallery creates some space between the images.

The .image class sets a width to our images, makes the height auto-adjust to keep the image aspect ratio, and changes the cursor to a pointer when hovering over an image.

The transition: transform 0.3s; in the .image class means any transformation applied to the images will transition over 0.3 seconds, making the change appear smoothly.

Finally, the .image:hover class applies a scaling transformation when an image is hovered over, enlarging the image to 120% of its original size, creating our parallax grow effect.

Conclusion

With just a few lines of HTML and CSS, we’ve created an interactive image zoom gallery with a parallax zoom effect. This user-friendly feature adds a dynamic touch to any website and can be customized to fit your design needs. So go ahead, experiment with it, and enhance your web design skills.

Next up

Table of Contents