Hover Zoom Effect Animation in Card Using CSS

Faraz

By Faraz -

Learn how to create a smooth hover zoom effect animation in a card using CSS. Step-by-step tutorial with simple code and examples.

Join us on Telegram
hover-zoom-effect-animation-in-card-using-css.webp
Read AlsoResponsive Headphones Landing Page using HTML, CSS, JavaScript.jpgResponsive Headphones Landing Page using HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Adding a hover zoom effect to a card makes a website look modern and interactive. It helps grab user attention and improves the user experience. In this guide, we will create a hover zoom effect animation in a card using only CSS.

This effect is useful for portfolio sections, product cards, team profiles, and blog previews. The best part? No JavaScript needed! Just simple HTML and CSS.

Prerequisites

Before starting, make sure you have:

  1. Basic knowledge of HTML and CSS
  2. A code editor (VS Code, Sublime Text, etc.)
  3. A browser (Chrome, Edge, Firefox)

Source Code

Step 1 (HTML Code):

First, create a simple card layout with an image inside it. Let’s break it down step by step.

1. HTML Document Structure

<!DOCTYPE html>
<html lang="en">
  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html lang="en">: Defines the HTML document and sets the language to English (en) for accessibility and SEO.

2. Head Section

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Card Hover Zoom Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
  • <meta charset="UTF-8" />: Sets the character encoding to UTF-8, allowing special characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures the webpage is responsive on all devices.
  • <title>CSS Card Hover Zoom Effect</title>: Sets the page title, which appears in the browser tab.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) to style the page.

3. Body Section

<body>
    <div class="card">
      <div class="card_img">
        <img
          src="https://www.codewithfaraz.com/tools/placeholder?size=200"
          alt="Profile Image"
        />
      </div>
    </div>
</body>
  • <body>: The main content of the page.
  • <div class="card">: A container for the card.
  • <div class="card_img">: A wrapper for the image inside the card.
  • <img src="https://www.codewithfaraz.com/tools/placeholder?size=200" alt="Profile Image" />:
    • Displays an image from an external URL (a placeholder).
    • The alt="Profile Image" provides alternative text if the image fails to load (important for accessibility & SEO).
Read Alsodropdown.pngDrop-Down Menu Using HTML and Pure CSS

Step 2 (CSS Code):

Now, let's add CSS to style the card and apply the zoom effect. Let’s break it down step by step.

1. Global Styles

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
  • The * selector applies styles to all elements on the page.
  • margin: 0; and padding: 0; remove any default spacing.
  • box-sizing: border-box; ensures padding and border are included in the element’s width and height.
  • font-family: Arial, sans-serif; sets the default font.

2. Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
  • display: flex; makes the body flexible, allowing easy centering.
  • justify-content: center; aligns the content horizontally in the center.
  • align-items: center; aligns the content vertically in the center.
  • height: 100vh; makes the body full screen height.
  • background-color: #f5f5f5; sets a light gray background.

3. Styling the Image Container

.card_img {
  position: relative;
  display: block;
  max-width: 190px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  z-index: 1;
}
  • position: relative; allows absolute positioning for child elements.
  • display: block; makes sure it behaves like a block element.
  • max-width: 190px; limits the width of the card to 190 pixels.
  • width: 100%; makes it responsive.
  • overflow: hidden; hides anything outside the container (important for zoom effect).
  • border-radius: 10px; adds rounded corners.
  • z-index: 1; ensures it stays above background elements.

4. Adding an Overlay Effect

.card_img::after {
  background: rgba(23, 23, 23, 0.2);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}
  • ::after creates a semi-transparent overlay.
  • background: rgba(23, 23, 23, 0.2); makes a dark overlay with 20% opacity.
  • content: ''; is required for pseudo-elements.
  • position: absolute; positions the overlay inside .card_img.
  • left: 0; top: 0; width: 100%; height: 0; initially hides the overlay.
  • opacity: 1; makes the overlay fully visible at the start.
  • pointer-events: none; prevents the overlay from blocking user interaction.

5. Overlay Animation on Hover

.card:hover .card_img::after {
  height: 100%;
  opacity: 0;
  transition: all 0.6s linear;
}
  • When .card is hovered, .card_img::after expands from height: 0 to height: 100%.
  • opacity: 0; makes the overlay disappear smoothly.
  • transition: all 0.6s linear; adds smooth animation.

6. Image Styling

.card_img img {
  width: 100%;
  border-radius: 10px;
  transition: all 1s ease-in-out;
}
  • width: 100%; makes the image fit inside .card_img.
  • border-radius: 10px; ensures the image matches the rounded corners of .card_img.
  • transition: all 1s ease-in-out; allows a smooth animation when hovered.

7. Zoom Effect on Hover

.card:hover .card_img img {
  transform: scale(1.1);
}
  • When .card is hovered, the image inside .card_img scales up by 10% (scale(1.1)).
  • This creates a zoom-in effect.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.card_img {
  position: relative;
  display: block;
  max-width: 190px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  z-index: 1;
}

.card_img::after {
  background: rgba(23, 23, 23, 0.2);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.card:hover .card_img::after {
  height: 100%;
  opacity: 0;
  transition: all 0.6s linear;
}

.card_img img {
  width: 100%;
  border-radius: 10px;
  transition: all 1s ease-in-out;
}

.card:hover .card_img img {
  transform: scale(1.1);
}

Final Output:

hover-zoom-effect-animation-in-card-using-css.gif
Read Alsoresponsive photography portfolio website landing page using html, css, and javascript.jpgResponsive Photography Portfolio Website Landing Page Using HTML, CSS, and JavaScript

Conclusion:

This hover-zoom effect animation in a card using CSS is simple yet powerful. It adds an engaging touch to your web design without using JavaScript. You can easily customize it by adjusting the scale, transition speed, and styling.

Now, try implementing this effect in your portfolio, product listings, or team profiles.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a hover zoom effect in css, smooth image zoom animation in css, card hover animation using css, css hover effects for cards, zoom-in effect on card hover, css hover effect, image zoom animation, card hover effect, css animations, hover zoom effect
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺