<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/choogoor/pen/YWBxAg?limit=all&page=4&q=comment" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
* {
box-sizing: border-box;
}
body {
background-image: -webkit-linear-gradient(left, #034378, #2d4e68);
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';
-webkit-transform: translate(-50%, 0);
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 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.card .data {
position: absolute;
bottom: 0;
width: 100%;
-webkit-transform: translateY(calc(70px + 1em));
transform: translateY(calc(70px + 1em));
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-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 {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
.example-1 .wrapper {
background: url(http://res.cloudinary.com/thedailybeast/image/upload/v1492110403/articles/2016/08/12/whose-gold-medal-is-worth-the-most/160811-glasser-olympic-medal-tease_mvemzf.jpg) center/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: gray;
}
.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: gray;
color: gray;
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;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform: translateY(0);
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%;
-webkit-transform: translate(-50%, -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 {
-webkit-transform: translate(-50%, -10px);
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 {
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.example-2 .data {
color: #fff;
-webkit-transform: translateY(calc(70px + 4em));
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%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.example-2 .button:hover::after {
-webkit-transform: translate(5px, -50%);
transform: translate(5px, -50%);
opacity: 1;
}
</style></head><body>
<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="#">Everything You Need to Know About Gold Medals</a></h1>
<p class="text">Olympic gold medals contain only about 1.34 percent gold, with the rest composed of sterling silver.</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>
</body></html>
