<div class="row">
<div class="example-1 card">
<div class="wrapper">
<div class="date">
<span class="day">12</span>
<span class="month">Aug</span>
<span class="year">2016</span>
</div>
<div class="data">
<div class="content">
<span class="author">Jane Doe</span>
<h1 class="title"><a href="#">Boxing icon has the will for a couple more fights</a></h1>
<p class="text">The highly anticipated world championship fight will take place at 10am and is the second major boxing blockbuster in the nation after 43 years.</p>
<label for="show-menu" class="menu-button"><span></span></label>
</div>
<input type="checkbox" id="show-menu" />
<ul class="menu-content">
<li>
<a href="#" class="fa fa-bookmark-o"></a>
</li>
<li><a href="#" class="fa fa-heart-o"><span>47</span></a></li>
<li><a href="#" class="fa fa-comment-o"><span>8</span></a></li>
</ul>
</div>
</div>
</div>
<div class="example-2 card">
<div class="wrapper">
<div class="header">
<div class="date">
<span class="day">12</span>
<span class="month">Aug</span>
<span class="year">2016</span>
</div>
<ul class="menu-content">
<li>
<a href="#" class="fa fa-bookmark-o"></a>
</li>
<li><a href="#" class="fa fa-heart-o"><span>18</span></a></li>
<li><a href="#" class="fa fa-comment-o"><span>3</span></a></li>
</ul>
</div>
<div class="data">
<div class="content">
<span class="author">Jane Doe</span>
<h1 class="title"><a href="#">Stranger Things: The sound of the Upside Down</a></h1>
<p class="text">The antsy bingers of Netflix will eagerly anticipate the digital release of the Survive soundtrack, out today.</p>
<a href="#" class="button">Read more</a>
</div>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(to right, #034378, #2d4e68);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.row {
max-width: 900px;
margin: 50px auto 0;
}
.card {
float: left;
padding: 0 1.7rem;
width: 50%;
}
.card .menu-content {
margin: 0;
padding: 0;
list-style-type: none;
}
.card .menu-content::before, .card .menu-content::after {
content: '';
display: table;
}
.card .menu-content::after {
clear: both;
}
.card .menu-content li {
display: inline-block;
}
.card .menu-content a {
color: #fff;
}
.card .menu-content span {
position: absolute;
left: 50%;
top: 0;
font-size: 10px;
font-weight: 700;
font-family: 'Open Sans';
transform: translate(-50%, 0);
}
.card .wrapper {
background-color: #fff;
min-height: 540px;
position: relative;
overflow: hidden;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card .wrapper:hover .data {
transform: translateY(0);
}
.card .data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
}
.card .data .content {
padding: 1em;
position: relative;
z-index: 1;
}
.card .author {
font-size: 12px;
}
.card .title {
margin-top: 10px;
}
.card .text {
height: 70px;
margin: 0;
}
.card input[type='checkbox'] {
display: none;
}
.card input[type='checkbox']:checked + .menu-content {
transform: translateY(-60px);
}
.example-1 .wrapper {
background: url(https://images.unsplash.com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80) 20% 1% / cover no-repeat;
}
.example-1 .date {
position: absolute;
top: 0;
left: 0;
background-color: #77d7b9;
color: #fff;
padding: 0.8em;
}
.example-1 .date span {
display: block;
text-align: center;
}
.example-1 .date .day {
font-weight: 700;
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.example-1 .date .month {
text-transform: uppercase;
}
.example-1 .date .month, .example-1 .date .year {
font-size: 12px;
}
.example-1 .content {
background-color: #fff;
box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}
.example-1 .title a {
color: #808080;
}
.example-1 .menu-button {
position: absolute;
z-index: 999;
top: 16px;
right: 16px;
width: 25px;
text-align: center;
cursor: pointer;
}
.example-1 .menu-button span {
width: 5px;
height: 5px;
background-color: #808080;
color: #808080;
position: relative;
display: inline-block;
border-radius: 50%;
}
.example-1 .menu-button span::after, .example-1 .menu-button span::before {
content: '';
display: block;
width: 5px;
height: 5px;
background-color: currentColor;
position: absolute;
border-radius: 50%;
}
.example-1 .menu-button span::before {
left: -10px;
}
.example-1 .menu-button span::after {
right: -10px;
}
.example-1 .menu-content {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
transition: transform 0.3s;
transform: translateY(0);
}
.example-1 .menu-content li {
width: 33.333333%;
float: left;
background-color: #77d7b9;
height: 60px;
position: relative;
}
.example-1 .menu-content a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
.example-1 .menu-content span {
top: -10px;
}
.example-2 .wrapper {
background: url(https://tvseriescritic.files.wordpress.com/2016/10/stranger-things-bicycle-lights-children.jpg) center / cover no-repeat;
}
.example-2 .wrapper:hover .menu-content span {
transform: translate(-50%, -10px);
opacity: 1;
}
.example-2 .header {
color: #fff;
padding: 1em;
}
.example-2 .header::before, .example-2 .header::after {
content: '';
display: table;
}
.example-2 .header::after {
clear: both;
}
.example-2 .header .date {
float: left;
font-size: 12px;
}
.example-2 .menu-content {
float: right;
}
.example-2 .menu-content li {
margin: 0 5px;
position: relative;
}
.example-2 .menu-content span {
transition: all 0.3s;
opacity: 0;
}
.example-2 .data {
color: #fff;
transform: translateY(calc(70px + 4em));
}
.example-2 .title a {
color: #fff;
}
.example-2 .button {
display: block;
width: 100px;
margin: 2em auto 1em;
text-align: center;
font-size: 12px;
color: #fff;
line-height: 1;
position: relative;
font-weight: 700;
}
.example-2 .button::after {
content: '\2192';
opacity: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
.example-2 .button:hover::after {
transform: translate(5px, -50%);
opacity: 1;
}