In this article
Looking for a way to display your latest blog posts or your recent projects in a modern and animated manner? These cards will perfectly complement your website! Let’s discover how to create them.
Step 1
The HTML code.
HTML
<div class="cards">
<a href="#" class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1504109586057-7a2ae83d1338?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1490&q=80)"></div>
<div class="card-content">
<p>Travel</p>
<h3>Japan</h3>
</div>
</a>
<a href="#" class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1593971657261-184f7a3a72de?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80)"></div>
<div class="card-content">
<p>Travel</p>
<h3>United States</h3>
</div>
</a>
<a href="#" class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1532465614-6cc8d45f647f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80)"></div>
<div class="card-content">
<p>Travel</p>
<h3>France</h3>
</div>
</a>
<a href="#" class="card">
<div class="card-background" style="background-image: url(https://images.unsplash.com/photo-1502003148287-a82ef80a6abc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80)"></div>
<div class="card-content">
<p>Travel</p>
<h3>Canada</h3>
</div>
</a>
</div>
Step 2
Let’s style the page and the section that groups the cards.
CSS
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 50px;
background: #131416;
}
.cards {
margin: auto;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 24px;
max-width: 1200px;
width: 100%;
}
@media(min-width: 540px){
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width: 960px){
.cards {
grid-template-columns: repeat(4, 1fr);
}
}
Step 3
Let’s create each card and the background one by one.
CSS
.card {
position: relative;
padding-bottom: 150%;
}
.card-background {
background-size: cover;
background-position: center;
border-radius: 24px;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform-origin: center;
transition: .2s;
}
Step 4
Let’s tackle the hover styles!
CSS
.card:hover .card-background {
transform: scale(1.05) translateZ(0);
}
.cards:hover > .card:not(:hover) .card-background {
filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}
Step 5
Let’s finish by styling the content of each card.
CSS
.card-content {
padding: 24px;
position: absolute;
font-family: arial, sans-serif;
}
.card-content p {
color: rgba(255, 255, 255, .6);
font-size: .9rem;
margin-bottom: 10px;
text-transform: uppercase;
}
.card-content h3 {
color: rgba(255, 255, 255, .9);
font-size: 1.9rem;
text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
}Category: Developers
