HTML
<div class="card_wrap">
<div class="card_body">
<div class="card_body-gradient"></div>
<div class="description">
<h1>Go Exploring</h1>
</div>
<div class="footer">
<h3 class="quote">"Look deep into nature, and then you will understand everything better."</h3>
<h3 class="author">Albert Einstein</h3>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
background-image: url(https://hd.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg);
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.card_wrap {
position: relative;
display: flex;
height: 100%;
}
.card_body {
position: relative;
margin: auto;
height: 0;
width: 360px;
box-shadow: -25px 25px 60px 5px rgba(0, 0, 0, 0.5),
-60px 60px 100px 13px rgba(0, 0, 0, 0.27);
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.card_body .description,
.card_body .footer {
position: absolute;
left: 25px;
color: transparent;
transition: all 0.5s ease-in-out 0.5s;
}
.card_body .description {
top: 380px;
}
.card_body .footer {
bottom: 135px;
}
.card_body h3,
.card_body h1 {
text-transform: uppercase;
}
.card_body h1 {
font-weight: 700;
font-size: 34px;
}
.card_body h3 {
font-weight: 300;
}
.quote {
font-style: italic;
}
.author {
font-weight: 400 !important;
}
.card_body-gradient {
position: absolute;
top: -290px;
height: 800px;
width: 100%;
background: linear-gradient(to bottom,
rgba(201, 230, 255, 0.19) 100px, #164036 500px);
transition: top 0.3s ease-in-out 0.3s;
}
.card_body.active {
height: 510px;
}
.card_body.active .card_body-gradient {
top: 0;
}
.card_body.active .description {
top: 230px;
color: #fff;
}
.card_body.active .footer {
bottom: 35px;
color: #fff;
}
6 Responses