<div class="container">
<article class="card">
<a href="#" class="card__link">
<!-- Icon -->
<div class="card__icon">
<svg viewbox="0 0 1129 994">
<g fill="none" fill-rule="nonzero" stroke="#999" stroke-width="41">
<path d="M564.5 212.437L95.67 873.5h937.66L564.5 212.437z"/>
<path d="M564.5 407.47L163.638 973.5h801.724L564.5 407.47z"/>
<path d="M564.5 35.409L39.699 774.5H1089.3L564.5 35.409z"/>
</g>
</svg>
</div>
<!-- Media -->
<div class="card__media">
<svg viewbox="0 0 1129 994">
<g fill="none" fill-rule="nonzero" stroke="#F5F5F5" stroke-width="41">
<path d="M564.5 212.437L95.67 873.5h937.66L564.5 212.437z"/>
<path d="M564.5 407.47L163.638 973.5h801.724L564.5 407.47z"/>
<path d="M564.5 35.409L39.699 774.5H1089.3L564.5 35.409z"/>
</g>
</svg>
</div>
<!-- Header -->
<div class="card__header">
<h3 class="card__header-title">Title of Card</h3>
<p class="card__header-meta">Subtitle</p>
<div class="card__header-icon">
<svg viewbox="0 0 28 25">
<path fill="#fff" d="M13.145 2.13l1.94-1.867 12.178 12-12.178 12-1.94-1.867 8.931-8.8H.737V10.93h21.339z"/>
</svg>
</div>
</div>
</a>
</article>
</div>
*,
:before,
:after {
box-sizing: border-box;
}
html {
background-color: #222;
color: white;
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0) translateY(50%);
}
90% {
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.container {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card {
position: relative;
width: 20em;
background-color: #292929;
transition: all .3s ease-in-out;
&:hover {
box-shadow: 0 10px 20px 10px rgba(black, .2);
}
}
.card__link {
display: block;
padding: 1em;
text-decoration: none;
}
.card__icon {
position: absolute;
width: 4em;
height: 4em;
transition: all .3s ease-in-out;
.card:hover & {
opacity: 0;
transform: scale(0);
}
}
.card__media {
padding: 2em 0;
svg path {
opacity: 0;
transition: all .3s ease-in-out;
transform-origin: center center;
}
.card:hover & {
svg path {
animation: fadeInScale .3s ease-in-out forwards;
}
svg path:nth-child(2) {
animation-delay: .1s;
}
svg path:nth-child(3) {
animation-delay: .2s;
}
}
}
.card__header {
position: relative;
}
.card__header-title {
margin: 0 0 .25em;
color: white;
}
.card__header-meta {
margin: 0;
color: #999;
}
.card__header-icon {
opacity: 0;
position: absolute;
right: 0;
top: 50%;
margin-top: -1em;
transform: translateX(-20%);
width: 2em;
height: 2em;
transition: all .3s ease-in-out;
.card:hover & {
opacity: 1;
transform: translateX(0);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.