Loading video…
All breakouts
3.2App Demo
Hook
How to make such a beautiful hover effect card?
@talbcode
6.7K followers · usually 803 views a post
Views
2.6K
Likes
172
Comments
0
Shares
11
Why it worked
The video provides a clear, step-by-step tutorial on creating a visually appealing hover effect using common web development technologies. The use of distinct colors and a dynamic hover interaction makes the content engaging and easy to follow for aspiring web developers.
Summary
This video demonstrates how to create a hover effect for cards using HTML and CSS. It involves structuring the HTML with nested divs and p tags, then applying CSS to style the cards, including background colors, dimensions, and hover animations that scale and blur the cards.
Structure
- 1Structure HTML with divs and p tags
- 2Style the main container with CSS
- 3Apply background colors to individual cards
- 4Style the card elements and add hover effects
- 5Implement a blur and scale effect for non-hovered cards
- 6Finalize and demonstrate the hover effect
Call to action
subscribe to our YouTube channel
On-screen text
Document
127.0.0.1:5500/index.html
File Edit Selection View
index.html X style.css X
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="card red">
<p class="tip">Hover Me</p>
</div>
<div class="card blue">
<p class="tip">Hover Me</p>
</div>
<div class="card green">
<p class="tip">Hover Me</p>
</div>
</div>
</body>
</html>
style.css X
1
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #111;
color: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
flex-direction: column;
gap: 15px;
}
.cards .red {
background-color: #f43f5e;
}
.cards .blue {
background-color: #3b82f6;
}
.cards .green {
background-color: #22c55e;
}
.cards .card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 100px;
width: 250px;
border-radius: 10px;
color: white;
cursor: pointer;
transition: 400ms;
}
.cards .card p {
font-size: 1em;
font-weight: 700;
}
.cards .card:hover {
transform: scale(1.1, 1.1);
}
.cards:hover > .card:not(:hover) {
transform: scale(0.9, 0.9);
filter: blur(10px);
}
More from @talbcode
Their other posts in the index, biggest breakout first.
