<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1 id="header" class="text-primary">My Blog</h1>
<div class="container list-article">
<div class="btn-group pull-right" id="switch-view">
<button class="btn btn-primary">
<span class="icon-th-large"></span>
</button>
<button class="btn btn-primary active">
<span class="icon-th-list"></span>
</button>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-12 article-wrapper">
<article>
<a href="#" class="more">more</a>
<div class="img-wrapper"><img src="http://lorempixel.com/150/150/fashion" alt="" /></div>
<h1>Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ducimus totam quasi nam porro sed.</p>
</article>
</div>
<div class="col-xs-12 article-wrapper">
<article>
<a href="#" class="more">more</a>
<div class="img-wrapper"><img src="http://lorempixel.com/150/150/city" alt="" /></div>
<h1>Dignissimos perferendis quae.</h1>
<p>Numquam dolorem sed quae placeat iusto! Quibusdam doloremque enim assumenda aliquam impedit earum alias labore.</p>
</article>
</div>
<div class="col-xs-12 article-wrapper">
<article>
<a href="#" class="more">more</a>
<div class="img-wrapper"><img src="http://lorempixel.com/150/150/food" alt="" /></div>
<h1>Quisquam deserunt cumque!</h1>
<p>Dolor tempora nihil facere explicabo qui mollitia deleniti quam quia iure nisi voluptate voluptatibus cum.</p>
</article>
</div>
<div class="col-xs-12 article-wrapper">
<article>
<a href="#" class="more">more</a>
<div class="img-wrapper"><img src="http://lorempixel.com/150/150/nature" alt="" /></div>
<h1>Velit natus possimus.</h1>
<p>Illum voluptates nisi asperiores temporibus illo maiores qui aliquid corporis exercitationem libero dolor tenetur. Doloremque!</p>
</article>
</div>
<div class="col-xs-12 article-wrapper">
<article>
<a href="#" class="more">more</a>
<div class="img-wrapper"><img src="http://lorempixel.com/150/150/abstract" alt="" /></div>
<h1>Atque quo maxime.</h1>
<p>Sed eveniet iste magni possimus ipsum dolore ea nesciunt eligendi id. Eum quos voluptatibus ullam.</p>
</article>
</div>
</div>
</div>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
padding: 0 100px 100px;
background-color: #cde !important;
}
h1#header {
text-align: center;
padding: 50px;
font-size: 62px;
font-family: "Pacifico";
}
article {
position: relative;
padding-left: 180px;
padding-right: 75px;
height: 150px;
margin-bottom: 30px;
background-color: #fff;
cursor: pointer;
}
article .img-wrapper {
position: absolute;
top: - 10px;
left: -10px;
background-color: #cde;
padding: 10px;
z-index: 1000;
}
article .img-wrapper img {
width: 150px;
}
article h1 {
height: 75px;
line-height: 75px;
font-size: 24px;
border-bottom: 2px solid #cde;
color: #428bca;
}
article p {
color: #888;
}
article a {
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
line-height: 150px;
text-align: center;
width: 100%;
background-color: #fff;
font-size: 48px;
font-style: italic;
opacity: 0;
color: #428bca !important;
text-decoration: none !important;
font-family: "Pacifico";
}
article:hover .img-wrapper {
padding: 5px;
}
article:hover .img-wrapper img {
width: 160px;
}
article:hover a {
opacity: 1;
}
.bloc article {
padding: 10px;
height: 225px;
margin-top: 75px;
}
.bloc article .img-wrapper {
position: relative;
top: -85px;
width: 170px;
left: inherit;
margin: auto;
margin-bottom: -100px;
}
.bloc article h1 {
font-size: 14px;
height: 37.5px;
line-height: 37.5px;
}
.bloc article p {
font-size: 12px;
}
.bloc article a {
line-height: 255px;
}