<div class="padding-y-lg container max-width-adaptive-lg">
<div class="grid gap-md">
<article class="card radius-lg col-6@sm col-4@md">
<a href="#0" class="block color-inherit text-decoration-none">
<figure class="media-wrapper">
<img class="block width-100%" src="https://images.unsplash.com/photo-1531591022136-eb8b0da1e6d0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
</figure>
<div class="text-component padding-md">
<h1 class="text-lg"><span class="card__title">Title of the card</span></h1>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="card__icon-wrapper" aria-hidden="true">
<svg class="icon icon--sm color-white" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><line data-color="color-2" fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12" stroke-linecap="butt"></line><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline></g></svg>
</div>
</a>
</article>
<article class="card radius-lg col-6@sm col-4@md">
<a href="#0" class="block color-inherit text-decoration-none">
<figure class="media-wrapper">
<img class="block width-100%" src="https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
</figure>
<div class="text-component padding-md">
<h1 class="text-lg"><span class="card__title">Title of the card</span></h1>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="card__icon-wrapper" aria-hidden="true">
<svg class="icon icon--sm color-white" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><line data-color="color-2" fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12" stroke-linecap="butt"></line><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline></g></svg>
</div>
</a>
</article>
<article class="card radius-lg col-6@sm col-4@md">
<a href="#0" class="block color-inherit text-decoration-none">
<figure class="media-wrapper">
<img class="block width-100%" src="https://images.unsplash.com/photo-1583132899463-28ba57170fdc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
</figure>
<div class="text-component padding-md">
<h1 class="text-lg"><span class="card__title">Title of the card</span></h1>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="card__icon-wrapper" aria-hidden="true">
<svg class="icon icon--sm color-white" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><line data-color="color-2" fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12" stroke-linecap="butt"></line><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline></g></svg>
</div>
</a>
</article>
</div>
</div>
/* đšī¸ Demo - Building scalable CSS architectures */
/* đ CodyHouse.co */
.card {
position: relative;
overflow: hidden;
background-color: var(--color-bg);
transition: box-shadow .3s;
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card:hover .card__title {
background-size: 100% 100%;
}
.card:hover .card__icon-wrapper .icon {
animation: card-icon-animation .3s;
}
.card__title {
background-image: linear-gradient(transparent 50%, alpha(var(--color-primary), 0.2) 50%);
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: background .3s;
}
.card__icon-wrapper {
position: absolute;
top: 0;
right: 0;
width: 3em;
height: 3em;
background-color: alpha(var(--color-black), 0.85);
border-bottom-left-radius: var(--radius-lg);
display: flex;
justify-content: center;
align-items: center;
}
@keyframes card-icon-animation {
0%, 100% {
opacity: 1;
transform: translateX(0%);
}
50% {
opacity: 0;
transform: translateX(100%);
}
51% {
opacity: 0;
transform: translateX(-100%);
}
}
View Compiled
