.article-link {
background-clip: padding-box;
color: white;
width: 425px;
height: 255px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
font: 600 16px/2em sans-serif;
text-decoration: none;
text-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.5);
border-radius: .375em;
transform: translateX(-50%) translateY(-50%);
}
.article-link img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.85);
transition: all .3s ease;
}
.article-link:hover img,
.article-link:focus img {
transform: translateX(-50%) translateY(-50%);
}
.article-title,
.article-date {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
}
.article-title {
display: block;
font-size: 2em;
transform: translateX(-50%) translateY(-50%);
transition: all .3s ease;
}
.article-link:hover .article-title,
.article-link:focus .article-title {
transform: translateX(-50%) translateY(calc(-50% - .5em));
}
.article-date {
opacity: 0;
font-size: 1.25em;
transform: translateX(-50%) translateY(calc(-50% + 1.8em));
transition: all .3s ease;
}
.article-link:hover .article-date,
.article-link:focus .article-date {
opacity: 1;
transform: translateX(-50%) translateY(calc(-50% + .8em));
transition: all .25s ease .05s;
}
