Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
News Cards - CSS only
<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>

News Cards - CSS only

Pure CSS news cards with revealing content on hover. Please feel free to drop a comment with some suggestion for improvement.

A Pen by Aleksandar Čugurović on CodePen.

License.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
// Variables
$regal-blue: #034378;
$san-juan: #2d4e68;
$bermuda: #77d7b9;
$white: #fff;
$black: #000;
$open-sans: 'Open Sans',
sans-serif;
// clear-fix mixin
@mixin cf {
&::before,
&::after {
content: '';
display: table;
}
&::after {
clear: both;
}
}
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(to right, $regal-blue, $san-juan);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
font-family: $open-sans;
}
a {
text-decoration: none;
}
h1 {
font-family: $open-sans;
font-weight: 300;
}
.row {
max-width: 900px;
margin: 50px auto 0;
}
// Base styles
.card {
float: left;
padding: 0 1.7rem;
width: 50%;
.menu-content {
@include cf;
margin: 0;
padding: 0;
list-style-type: none;
li {
display: inline-block;
}
a {
color: $white;
}
span {
position: absolute;
left: 50%;
top: 0;
font-size: 10px;
font-weight: 700;
font-family: 'Open Sans';
transform: translate(-50%, 0);
}
}
.wrapper {
background-color: $white;
min-height: 540px;
position: relative;
overflow: hidden;
box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2);
&:hover {
.data {
transform: translateY(0);
}
}
}
.data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
.content {
padding: 1em;
position: relative;
z-index: 1;
}
}
.author {
font-size: 12px;
}
.title {
margin-top: 10px;
}
.text {
height: 70px;
margin: 0;
}
input[type='checkbox'] {
display: none;
}
input[type='checkbox']:checked + .menu-content {
transform: translateY(-60px);
}
}
// First example styles
.example-1 {
.wrapper {
background: url(https://hd.unsplash.com/photo-1463415268136-e52a5af54519) center / cover no-repeat;
}
.date {
position: absolute;
top: 0;
left: 0;
background-color: $bermuda;
color: $white;
padding: 0.8em;
span {
display: block;
text-align: center;
}
.day {
font-weight: 700;
font-size: 24px;
text-shadow: 2px 3px 2px rgba($black, 0.18);
}
.month {
text-transform: uppercase;
}
.month,
.year {
font-size: 12px;
}
}
.content {
background-color: $white;
box-shadow: 0 5px 30px 10px rgba($black, 0.3);
}
.title {
a {
color: lighten($black, 50%);
}
}
.menu-button {
position: absolute;
z-index: 999;
top: 16px;
right: 16px;
width: 25px;
text-align: center;
cursor: pointer;
span {
width: 5px;
height: 5px;
background-color: lighten($black, 50%);
color: lighten($black, 50%);
position: relative;
display: inline-block;
border-radius: 50%;
&::after,
&::before {
content: '';
display: block;
width: 5px;
height: 5px;
background-color: currentColor;
position: absolute;
border-radius: 50%;
}
&::before {
left: -10px;
}
&::after {
right: -10px;
}
}
}
.menu-content {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
transition: transform 0.3s;
transform: translateY(0);
li {
width: 33.333333%;
float: left;
background-color: $bermuda;
height: 60px;
position: relative;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
span {
top: -10px;
}
}
}
// Second example styles
.example-2 {
.wrapper {
background: url(https://wallpaperdoc.xyz/wp-content/uploads/2016/07/Stranger-Things-Bicycle-Lights-Children.jpg) center / cover no-repeat;
&:hover {
.menu-content {
span {
transform: translate(-50%, -10px);
opacity: 1;
}
}
}
}
.header {
@include cf;
color: $white;
padding: 1em;
.date {
float: left;
font-size: 12px;
}
}
.menu-content {
float: right;
li {
margin: 0 5px;
position: relative;
}
span {
transition: all 0.3s;
opacity: 0;
}
}
.data {
color: $white;
transform: translateY(calc(70px + 4em));
}
.title {
a {
color: $white;
}
}
.button {
display: block;
width: 100px;
margin: 2em auto 1em;
text-align: center;
font-size: 12px;
color: $white;
line-height: 1;
position: relative;
font-weight: 700;
&::after {
content: '\2192';
opacity: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
&:hover {
&::after {
transform: translate(5px, -50%);
opacity: 1;
}
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.