Boxing icon has the will for a couple more fights
The highly anticipated world championship fight will take place at 10am and is the second major boxing blockbuster in the nation after 43 years.
Yêu cầu
The highly anticipated world championship fight will take place at 10am and is the second major boxing blockbuster in the nation after 43 years.
The antsy bingers of Netflix will eagerly anticipate the digital release of the Survive soundtrack, out today.
Read more
...
<div class="card-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="card-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>
...
<style>.card {
width: 50%;
margin-bottom: 16px;
}
.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);
}
.card-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;
}
.card-1 .date {
position: absolute;
top: 0;
left: 0;
background-color: #77d7b9;
color: #fff;
padding: 0.8em;
}
.card-1 .date span {
display: block;
text-align: center;
}
.card-1 .date .day {
font-weight: 700;
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.card-1 .date .month {
text-transform: uppercase;
}
.card-1 .date .month,
.card-1 .date .year {
font-size: 12px;
}
.card-1 .content {
background-color: #fff;
box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}
.card-1 .title a {
color: gray;
}
.card-1 .menu-button {
position: absolute;
z-index: 999;
top: 16px;
right: 16px;
width: 25px;
text-align: center;
cursor: pointer;
}
.card-1 .menu-button span {
width: 5px;
height: 5px;
background-color: gray;
color: gray;
position: relative;
display: inline-block;
border-radius: 50%;
}
.card-1 .menu-button span::after, .card-1 .menu-button span::before {
content: "";
display: block;
width: 5px;
height: 5px;
background-color: currentColor;
position: absolute;
border-radius: 50%;
}
.card-1 .menu-button span::before {
left: -10px;
}
.card-1 .menu-button span::after {
right: -10px;
}
.card-1 .menu-content {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
transition: transform 0.3s;
transform: translateY(0);
}
.card-1 .menu-content li {
width: 33.333333%;
float: left;
background-color: #77d7b9;
height: 60px;
position: relative;
}
.card-1 .menu-content a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
.card-1 .menu-content span {
top: -10px;
}
.card-2 .wrapper {
background: url(https://tvseriescritic.files.wordpress.com/2016/10/stranger-things-bicycle-lights-children.jpg) center/cover no-repeat;
}
.card-2 .wrapper:hover .menu-content span {
transform: translate(-50%, -10px);
opacity: 1;
}
.card-2 .header {
color: #fff;
padding: 1em;
}
.card-2 .header::before, .card-2 .header::after {
content: "";
display: table;
}
.card-2 .header::after {
clear: both;
}
.card-2 .header .date {
float: left;
font-size: 12px;
}
.card-2 .menu-content {
float: right;
}
.card-2 .menu-content li {
margin: 0 5px;
position: relative;
}
.card-2 .menu-content span {
transition: all 0.3s;
opacity: 0;
}
.card-2 .data {
color: #fff;
transform: translateY(calc(70px + 4em));
}
.card-2 .title a {
color: #fff;
}
.card-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;
}
.card-2 .button::after {
content: "→";
opacity: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
.card-2 .button:hover::after {
transform: translate(5px, -50%);
opacity: 1;
}
</style>
<script> </script>