Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.card {
width: 300px;
background: #fff;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
/* Add box shadow to entire card on hover */
.card:hover {
box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.3);
}
/* Creates variation of card component in a wide format */
.card.card--wide {
display: flex;
justify-content: center;
align-items: center;
width: 768px;
}
.card__media {
position: relative;
width: 300px;
}
/* Adds transparent overlay over image. */
.card__media::before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
.card__media img {
display: block;
max-width: 100%;
height: auto;
}
.card__date {
position: absolute;
right: 20px;
top: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 70px;
height: 70px;
border-radius: 50%;
background: #e74c3c;
color: white;
font-weight: bold;
}
.date--day {
font-size: 20px;
line-height: 1;
}
.date--month {
font-size: 14px;
line-height: 1;
text-transform: uppercase;
}
.card__category {
position: absolute;
bottom: 0;
left: 0;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.06em;
display: inline-block;
color: white;
background: #e74c3c;
text-align: center;
padding: 5px 15px;
text-transform: uppercase;
}
.card__content {
padding: 40px 25px;
color: #999999;
transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}
/* Changes padding on wide card */
.card--wide .card__content {
padding: 20px 20px;
width: calc(100% - 300px);
}
/* By default we hide the excerpt on card long. */
.card__excerpt {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
/* Removes max-height on wide card */
.card--wide .card__excerpt {
max-height: none;
}
/* On hover, we expand the excerpt container to show the text. */
.card:hover .card__excerpt {
max-height: 300px;
}
.card__title {
color: initial;
margin: 0 0 10px;
font-size: 20px;
}
.card__subtitle {
color: #e74c3c;
font-weight: 300;
}
.card__meta {
color: #ccc;
font-size: 14px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment