3D Card Hover Effect Gallery | HTML CSS JavaScript

3D Card Hover Effect Gallery with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #31

Project Overview

The 3D Card Hover Effect Gallery is an interactive UI component built using HTML, CSS, and JavaScript that displays cards with a dynamic 3D hover animation. When users move the cursor over a card, it tilts and creates a depth effect, providing a visually engaging experience. This project demonstrates frontend concepts such as CSS transforms, perspective effects, hover animations, and interactive UI design, making it ideal for modern portfolios, product showcases, or gallery layouts.

Key Features

Interactive cards with smooth 3D hover tilt effects
CSS transform and perspective animations for depth
Modern card-based gallery layout
Hover interactions that enhance visual engagement
Responsive design for desktop and mobile devices
Clean and reusable UI component for portfolios or galleries
Lightweight implementation using HTML, CSS, and JavaScript

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Card Hover Gallery</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<h1>3D Card Hover Effect Gallery</h1>

<div class="gallery">

<div class="card">
<img src="https://picsum.photos/300/200?1">
<div class="card-info">
<h3>Mountain</h3>
<p>Beautiful landscape view</p>
</div>
</div>

<div class="card">
<img src="https://picsum.photos/300/200?2">
<div class="card-info">
<h3>City</h3>
<p>Urban skyline at night</p>
</div>
</div>

<div class="card">
<img src="https://picsum.photos/300/200?3">
<div class="card-info">
<h3>Ocean</h3>
<p>Peaceful ocean waves</p>
</div>
</div>

<div class="card">
<img src="https://picsum.photos/300/200?5">
<div class="card-info">
<h3>Forest</h3>
<p>Nature green forest</p>
</div>
</div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
padding:40px;
text-align:center;
color:white;
}

h1{
margin-bottom:40px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}

.card{
background:white;
border-radius:12px;
overflow:hidden;
transform-style:preserve-3d;
transition:transform 0.2s;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
cursor:pointer;
}

.card img{
width:100%;
height:180px;
object-fit:cover;
}

.card-info{
padding:15px;
color:#111;
}

.card-info h3{
margin-bottom:5px;
}

Javascript Code

const cards = document.querySelectorAll(".card")

cards.forEach(card => {

card.addEventListener("mousemove", e => {

const rect = card.getBoundingClientRect()

const x = e.clientX - rect.left
const y = e.clientY - rect.top

const centerX = rect.width / 2
const centerY = rect.height / 2

const rotateX = -(y - centerY) / 10
const rotateY = (x - centerX) / 10

card.style.transform =
`rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`

})

card.addEventListener("mouseleave", () => {
card.style.transform = "rotateX(0) rotateY(0)"
})

})