Curious about making your website pop? Our tutorial covers how to create those cool 3D hovering cards you’ve seen around! Using just HTML and CSS, you’ll learn step by step how to make cards that float and move when someone checks out your site.
We’ll start with the basics in HTML, setting up the cards with the content you want. Then, with CSS magic, we’ll bring them to life, making them hover and react in a 3D way when someone hovers over them.
These cards are like magnets for attention! They’ll make your website more interactive and eye-catching, perfect for showcasing anything from products to your best work. Get ready to make your website stand out with these awesome 3D hovering cards!
HTML :
The provided code is an HTML document template setting up a hovering effect on cards. It includes three cards with images and their respective hover effects, defined through CSS classes. The images are linked from Google Drive, and the design aims to create an engaging interactive experience for users by showcasing floating cards upon hover.
The linked stylesheet “style.css” likely contains the specific CSS rules defining these hovering effects.
<div id="cards">
<div class="card" data-color="blue">
<img class="card-front-image card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<div class="card-faders">
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-1.webp" />
</div>
</div>
<div class="card" data-color="green">
<img class="card-front-image card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<div class="card-faders">
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-2.webp" />
</div>
</div>
<div class="card" data-color="brown">
<img class="card-front-image card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<div class="card-faders">
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
<img class="card-fader card-image" src="http://codingstella.com/wp-content/uploads/2024/01/download-3.webp" />
</div>
</div>
</div>
CSS :
The Below CSS code defines a hovering effect for cards, adjusting the background color on hover. It sets root variables for colors and employs media queries for responsive design. Cards change opacity and scale on hover and click, accompanied by fader images animating left and right. Media queries adjust layout and card sizes for different screen sizes. Keyframes dictate the animations for the fader images, creating a dynamic visual experience.
:root {
--blue-rgb: 92 192 249;
--green-rgb: 125 161 35;
--brown-rgb: 127 46 23;
}
html, body {
background-color: black;
}
body {
min-height: 100vh;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 1000ms;
}
body:has(.card[data-color="blue"]:hover) {
background-color: rgb(var(--blue-rgb) / 25%);
}
body:has(.card[data-color="blue"]:hover) {
background-color: rgb(var(--blue-rgb) / 25%);
}
body:has(.card[data-color="green"]:hover) {
background-color: rgb(var(--green-rgb) / 25%);
}
body:has(.card[data-color="brown"]:hover) {
background-color: rgb(var(--brown-rgb) / 25%);
}
#cards {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.card {
background-size: cover;
background-position: center;
position: relative;
cursor: pointer;
outline: none;
transition: scale 100ms;
}
.card .card-front-image {
position: relative;
z-index: 2;
}
.card .card-image {
width: clamp(300px, 20vw, 500px);
aspect-ratio: 2 / 3;
border-radius: clamp(0.5rem, 0.75vw, 2rem);
}
.card-faders {
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
opacity: 0;
transition: opacity 1500ms;
pointer-events: none;
}
.card:hover .card-faders {
opacity: 1;
}
.card:active {
scale: 0.98;
}
.card-fader {
position: absolute;
left: 0px;
top: 0px;
}
.card-fader:nth-child(odd) {
animation: fade-left 3s linear infinite;
}
.card-fader:nth-child(even) {
animation: fade-right 3s linear infinite;
}
.card-fader:is(:nth-child(3), :nth-child(4)) {
animation-delay: 750ms;
}
.card-fader:is(:nth-child(5), :nth-child(6)) {
animation-delay: 1500ms;
}
.card-fader:is(:nth-child(7), :nth-child(8)) {
animation-delay: 2250ms;
}
@media(max-width: 1200px) {
body {
justify-content: flex-start;
align-items: flex-start;
}
#cards {
flex-direction: column;
align-items: center;
gap: 4rem;
padding: 4rem;
}
.card .card-image {
width: 400px;
}
}
@media(max-width: 600px) {
#cards {
gap: 2rem;
padding: 2rem;
}
.card {
width: 80%;
}
.card .card-image {
width: 100%;
}
}
@keyframes fade-left {
from {
scale: 1;
translate: 0%;
opacity: 1;
}
to {
scale: 0.8;
translate: -30%;
opacity: 0;
}
}
@keyframes fade-right {
from {
scale: 1;
translate: 0%;
opacity: 1;
}
to {
scale: 0.8;
translate: 30%;
opacity: 0;
}
}
There you have it! We’ve just created awesome 3D Hovering Cards using HTML and CSS. Spice up your web content with these cool, interactive cards. Happy coding!
If you run into any hiccups with your project , worry not. You can easily grab the source code for this project. Just hit the Download button to get started on your coding adventure. Happy coding!
