<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Interactive Hover Cards</title>
<style>
body{
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
color: #fff;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fbc2eb 100%);
font-family: 'Arial', sans-serif;
}
.cards{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.cards .card{
display: flex;
align-items: center;justify-content: center;
flex-direction: column;
height: 200px;
width: 280px;
color: white;
cursor: pointer;
border-radius: 12px;
transition: transform 400ms, box-shadow 400ms;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.cards .card:hover {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.cards:hover > .card:not(:hover) {
filter: blur(5px);
transform: scale(0.9);
}
.cards .red {
background: linear-gradient(45deg, #ff5858, #f09819);
}
.cards .blue {
background: linear-gradient(45deg, #36d1dc, #5b86e5);
}
.cards .green {
background: linear-gradient(45deg, #11998e, #38ef7d);
}
.cards .card p.title {
font-size: 1.2em;
font-weight: bold;
margin: 0;
}
.cards .card p.subtitle {
font-size: 0.9em;
margin: 0;
}
.cards .card:hover p.title {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
</style>
</head>
<body>
<div class="cards">
<div class="card red">
<p class="title">Discover Exciting colors</p>
<p class="subtitle">Click to feel the magic!</p>
</div>
<div class="card blue">
<p class="title">Feel the Cool Breeze</p>
<p class="subtitle">Hover to explore serenity</p>
</div>
<div class="card green">
<p class="title">Embrance Nature</p>
<p class="subtitle">Step into a world of calm.</p>
</div>
</div>
</body>
</html>
0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
Keyboard Shortcuts
Shortcuts Open/Close/ or ?
Play/PauseSPACE
Increase Volume↑
Decrease Volume↓
Seek Forward→
Seek Backward←
Captions On/Offc
Fullscreen/Exit Fullscreenf
Mute/Unmutem
Decrease Caption Size-
Increase Caption Size+ or =
Seek %0-9
Prince
Posted on
4
Interactive cards hover using the html css and javascript. Follow us on the instagram for more....
Hands-on debugging session: instrument, monitor, and fix
Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)