Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Francesco Improta.
<section class="grid-container">
<div class="grid">
<a href="#"><div class="item "><p class="title">News</p></div></a>
<a href="#"><div class="item itall"><p class="title">Tall News</p></div></a>
<a href="#"><div class="item "><p class="title">News</p></div></a>
<a href="#"><div class="item "><p class="title">News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
<a href="#"><div class="item "><p class="title">News</p></div></a>
<a href="#"><div class="item "><p class="title">News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
<a href="#"><div class="item irep"><p class="title">Reportage News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
<a href="#"><div class="item"><p class="title">News</p></div></a>
</div>
</section>
jQuery(document).ready(function ($) {
var $container = $('.grid').masonry({
columnWidth: 280,
itemSelector: '.item',
isFitWidth: true
});
});
html, body {
background: #333;
font-family: Helvetica;
}
.grid-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.toggle {
text-align: center;
padding: 0;
color: white;
}
.toggle li {
display: inline;
padding: 0 60px;
}
.toggle label {
font-size: 1.2em;
padding: 0 10px;
}
.grid {
margin: 0 auto;
}
.item {
color: white;
display: table;
font-size: 1.4em;
text-align: center;
margin: 5px;
width: 270px;
background: #2ecc71;
height: 280px;
}
.item:hover .title {
opacity: 1;
}
.title {
display: table-cell;
vertical-align: middle;
opacity: 0;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}
.itall {
background: #e74c3c;
height: 570px;
}
.irep {
background: blue;
height: 570px;
width: 550px;
}
.expand {
transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
-webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
height: 100%;
width: 100%;
left: 0 !important;
top: 0 !important;
z-index: 99;
text-indent: -9999px;
}
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.