<div class="site__wrapper">
<div class="grid">
<div class="card">
<div class="card__image">
<img src="https://unsplash.it/400/608?image=123" alt="">
<div class="card__overlay card__overlay--indigo">
<div class="card__overlay-content">
<ul class="card__meta">
<li><a href="#0"><i class="fa fa-tag"></i> Html5/Css3</a></li>
<li><a href="#0"><i class="fa fa-clock-o"></i> 2 min ago</a></li>
</ul>
<a href="#0" class="card__title">How to create a card based article with HTML5 & CSS3</a>
<ul class="card__meta card__meta--last">
<li><a href="#0"><i class="fa fa-user"></i> Mithicher</a></li>
<li><a href="#0"><i class="fa fa-facebook-square"></i> Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card__image">
<img src="https://unsplash.it/400/300?image=100" alt="">
<div class="card__overlay card__overlay--blue">
<div class="card__overlay-content">
<ul class="card__meta">
<li><a href="#0"><i class="fa fa-tag"></i> UI/UX</a></li>
<li><a href="#0"><i class="fa fa-clock-o"></i> 2 days ago</a></li>
</ul>
<a href="#0" class="card__title">How to create a card based article with HTML5 & CSS3</a>
<ul class="card__meta card__meta--last">
<li><a href="#0"><i class="fa fa-user"></i> Mithicher</a></li>
<li><a href="#0"><i class="fa fa-facebook-square"></i> Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card__image">
<img src="https://unsplash.it/400/300?image=200" alt="">
<div class="card__overlay card__overlay--indigo">
<div class="card__overlay-content">
<ul class="card__meta">
<li><a href="#0"><i class="fa fa-tag"></i> UI/UX</a></li>
<li><a href="#0"><i class="fa fa-clock-o"></i> 2 days ago</a></li>
</ul>
<a href="#0" class="card__title">How to create a card based article with HTML5 & CSS3</a>
<ul class="card__meta card__meta--last">
<li><a href="#0"><i class="fa fa-user"></i> Mithicher</a></li>
<li><a href="#0"><i class="fa fa-facebook-square"></i> Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card__image">
<img src="https://unsplash.it/400/300?image=300" alt="">
<div class="card__overlay card__overlay--indigo">
<div class="card__overlay-content">
<ul class="card__meta">
<li><a href="#0"><i class="fa fa-tag"></i> Tutorials</a></li>
<li><a href="#0"><i class="fa fa-clock-o"></i> 2 days ago</a></li>
</ul>
<a href="#0" class="card__title">How to create a card based article with HTML5 & CSS3</a>
<ul class="card__meta card__meta--last">
<li><a href="#0"><i class="fa fa-user"></i> Mithicher</a></li>
<li><a href="#0"><i class="fa fa-facebook-square"></i> Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card__image">
<img src="https://unsplash.it/400/300?image=400" alt="">
<div class="card__overlay card__overlay--blue">
<div class="card__overlay-content">
<ul class="card__meta">
<li><a href="#0"><i class="fa fa-tag"></i> Tutorials</a></li>
<li><a href="#0"><i class="fa fa-clock-o"></i> 2 days ago</a></li>
</ul>
<a href="#0" class="card__title">How to create a card based article with HTML5 & CSS3</a>
<ul class="card__meta card__meta--last">
<li><a href="#0"><i class="fa fa-user"></i> Mithicher</a></li>
<li><a href="#0"><i class="fa fa-facebook-square"></i> Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="site__info">
<p>Placeholder images are served from <a target="_blank" href="https://unsplash.it">www.unsplash.it</a></p>
<p>Handcrafted by <a target="_blank" href="https://mithicher.github.io">Mithicher</a>. Tweet me on <a target="_blank" href="https://twitter.com/mithicher">Twitter</a></p>
</div>
</div><!-- @end site__wrapper -->
// Color Variables
$indigo: #5C6BC0;
$blue: #29B6F6;
$black: #717171;
$body-font-family: "Lato";
$header-font-family: "Montserrat";
// Basic Styles for Demo
*,*:after,*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
}
body {
font-size: 1em;
font-family: $body-font-family;
font-weight: 400;
line-height: 1.5;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
img {
height: auto;
max-width: 100%;
}
a {
color: $blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// Basics demo styles
.site__wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
.site__info {
clear: both;
display: block;
font-variant: small-caps;
letter-spacing: 2px;
padding-top: 1.5em;
padding-bottom: 1.5em;
text-align: center;
}
// Basic Grid for Demo;
.grid {
float: none;
width: 100%;
padding-left: 0.2em;
padding-right: 0.2em;
padding-bottom: 0.4em;
@media screen and (min-width: 40.063em) {
float: left;
width: 33.333%;
}
}
// Card Article
.card {
}
.card__image {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: block;
min-height: 240px;
overflow: hidden;
position: relative;
> img {
display: block;
margin-bottom: 0;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
&:hover > img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
}
.card__title {
color: white;
display: inline-block;
font-family: $header-font-family;
font-size: 1.5em;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75em;
text-decoration: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
&:hover {
color: rgba(white, 0.7);
text-decoration: none;
}
}
.card__overlay {
content: "";
bottom: 0;
display: block;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
.card__overlay--indigo {
background-image: linear-gradient(to bottom, rgba($indigo, 0.1), rgba($indigo, 0.8));
z-index: 2;
}
.card__overlay--blue {
background-image: linear-gradient(to bottom, rgba($blue, 0.1), rgba($blue, 0.8));
z-index: 2;
}
.card__overlay-content {
position: absolute;
bottom: 0;
padding: 1.5em;
z-index: 3;
}
.card__meta {
margin: 0;
margin-right: -1em;
margin-bottom: 0.75em;
&.card__meta--last {
margin-bottom: 0;
}
li {
color: #f8f8f8;
display: inline;
list-style-type: none;
margin-bottom: 0;
padding-right: 1em;
font-size: 0.85em;
font-variant: small-caps;
letter-spacing: 1px;
&:not(:last-child):after {
content: "\25cf";
font-style: normal;
position: relative;
color: rgba(white, 0.25);
right: -0.6em;
}
> a {
color: #f8f8f8;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.