<!--images from http://hiugo.deviantart.com/-->
<div class="container">
<div class="items-wrapper">
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig03.deviantart.net/2762/f/2011/034/b/6/092_gastly_by_hiugo-d370ext.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>100</li>
<li class="comments"><i class="fa fa-comment-o"></i>1</li>
<li class="likes"><i class="fa fa-heart-o"></i>10</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig09.deviantart.net/8cc8/f/2011/068/9/a/069_bellsprout_by_hiugo-d3b8tzu.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>101</li>
<li class="comments"><i class="fa fa-comment-o"></i>2</li>
<li class="likes"><i class="fa fa-heart-o"></i>11</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig05.deviantart.net/f9ea/f/2011/034/a/a/043_oddish_by_hiugo-d376fko.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>102</li>
<li class="comments"><i class="fa fa-comment-o"></i>3</li>
<li class="likes"><i class="fa fa-heart-o"></i>12</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig01.deviantart.net/66e1/f/2011/034/9/f/037_vulpix_by_hiugo-d375ee5.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>103</li>
<li class="comments"><i class="fa fa-comment-o"></i>3</li>
<li class="likes"><i class="fa fa-heart-o"></i>13</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig12.deviantart.net/96ea/f/2011/034/d/1/035_clefairy_by_hiugo-d3757ru.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>104</li>
<li class="comments"><i class="fa fa-comment-o"></i>4</li>
<li class="likes"><i class="fa fa-heart-o"></i>14</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig14.deviantart.net/904c/f/2011/040/b/3/088_grimer_by_hiugo-d395bfz.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>105</li>
<li class="comments"><i class="fa fa-comment-o"></i>6</li>
<li class="likes"><i class="fa fa-heart-o"></i>15</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig09.deviantart.net/c931/f/2011/034/b/1/094_gengar_by_hiugo-d370ele.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>106</li>
<li class="comments"><i class="fa fa-comment-o"></i>7</li>
<li class="likes"><i class="fa fa-heart-o"></i>16</li>
<ul>
</div>
<div data-item class="item-box">
<a href="#" class="item-info">
<img src="http://orig04.deviantart.net/5e1a/f/2011/034/c/7/charmander_by_hiugo-d37311z.jpg" alt="">
</a>
<ul class="item-meta">
<li class="views"><i class="fa fa-eye"></i>107</li>
<li class="comments"><i class="fa fa-comment-o"></i>8</li>
<li class="likes"><i class="fa fa-heart-o"></i>17</li>
<ul>
</div>
</div>
</div>
<!-- modal -->
<div class="modal">
<div class="modal-wrapper">
<div class="header-title">
<div class="title">Header title</div>
by <a href="#">author name</a>
</div>
<div class="modal-preview">
<img data-img src="" alt="">
<ul>
<li><i class="fa fa-eye"></i> <span data-views></span> views</li>
<li><i class="fa fa-comment-o"></i> <span data-comments></span> comments</li>
<li><i class="fa fa-heart-o"></i> <span data-likes></span> likes</li>
</ul>
</div>
<div class="modal-info">
<div data-content></div>
<a href="#" class="more">More from author</a>
</div>
<i class="modal-close fa fa-close"></i>
</div>
</div>@import "https://fonts.googleapis.com/css?family=Open+Sans";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
body {
background: #181818;
font-family 'Open Sans';
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 960px;
margin: 45px auto;
}
.item-box {
opacity: 0;
background: #34495E;
color: #F0F3F4;
padding: 10px;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
}
.item-box a {
position: relative;
display: block;
}
.item-box a:after {
content: '';
transition: all .3s ease;
}
.item-box a:hover:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(142, 68, 173, .5);
}
.item-box.show {
opacity: 1;
-webkit-animation: .4s fadeIn ease-in 0s;
-moz-animation: .4s fadeIn ease-in 0s;
animation: .4s fadeIn ease-in 0s;
}
.item-box img {
display: block;
width: 100%;
height: auto;
/*min-height: 100px;*/
}
.item-box .item-meta {
text-align: right;
list-style-type: none;
background: #000;
opacity: 0.8;
padding: 8px 5px;
}
.item-box .item-meta li {
font-size: 14px;
display: inline-block;
margin-right: 10px;
color: #ECF0F1;
font-family: 'Open Sans';
}
.item-box .item-meta i {
color: #9B59B6;
font-weight: bold;
margin-right: 3px;
}
@keyframes fadeIn {
0% {transform: scale(.9);}
100% {transform: scale(1);}
}
@-webkit-keyframes fadeIn {
0% {-webkit-transform: scale(.9);}
100% {-webkit-transform: scale(1);}
}
@-moz-keyframes fadeIn {
0% {-moz-transform: scale(.9);}
100% {-moz-transform: scale(1);}
}
.modal {
visibility: hidden;
position: fixed;
top: 25%;
left: 50%;
width: 630px;
margin-left: -315px;
z-index: 999;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
/*blur-text-chromium-please-die*/
/* -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0);
-moz-transform: translateX(-50%) translateY(-50%) translateZ(0);
transform: translateX(-50%) translateY(-50%) translateZ(0);*/
}
.modal.show {
visibility: visible;
}
.modal-wrapper {
background: #2C3E50;
padding: 35px;
height: 100%;
-webkit-transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transform: rotateY(-70deg);
-moz-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 0;
color: #fff;
}
.modal.show .modal-wrapper {
opacity: 1;
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
.modal .modal-close {
position: absolute;
top: 12px;
right: 12px;
cursor: pointer;
font-size: 24px;
}
.modal.show .modal-wrapper .modal-close:hover {
color: #000;
}
.modal .modal-wrapper:after {
content: '';
display: table;
clear: both;
}
.modal .header-title .title {
color: #9B59B6;
font-size: 26px;
font-weight: bold;
font-family: 'Open Sans';
}
.modal .header-title > a {
display: inline-block;
margin: 5px 0;
text-decoration: none;
color: #B3B6B7;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
transition: color .3s linear;
font-family: 'Open Sans';
font-size: 14px;
}
.modal .header-title > a:hover {
color: #F0F3F4;
}
.modal .modal-info p {
margin: 8px 0;
font: normal 14px/1.25 'Open Sans';
}
.modal .modal-info p:first-child {
margin-top: 0;
}
.modal .modal-preview {
float: left;
margin-right: 10px;
}
.modal .modal-preview ul {
list-style-type: none;
}
.modal .modal-preview li {
padding: 5px 0;
border-bottom: 1px solid #BB8FCE;
font-size: 14px;
color: #D6DBDF;
font-family: 'Open Sans';
}
.modal .modal-preview i {
color: #9B59B6;
font-weight: bold;
}
.modal .modal-preview img {
width: 200px;
}
.modal .modal-info {
width: 345px;
float: left;
}
.modal .modal-info .more {
float: right;
margin-top: 10px;
text-decoration: none;
display: inline-block;
padding: 10px 15px;
background: #9B59B6;
color: #fff;
-webkit-transition: background-color .2s ease;
-moz-transition: background-color .2s ease;
transition: background-color .2s ease;
font-family: 'Open Sans';
}
.modal .modal-info .more:hover {
background: #6C3483;
}
.additional {
text-align: center;
}
.pause {
display: inline-block;
border: none;
outline: none;
margin-top: 25px;
background: #000;
color: #fff;
padding: 10px 25px;
cursor: pointer;
font-size: 16px;
}
.pause:hover {
background: #9B59B6;
}// AbsoluteGrid module for creating grid
var AbsoluteGrid = (function() {
//public interface to return
var interfaceModel = {};
interfaceModel.init = function(config) {
this.wrapper = $(config.container);
this.elements = this.wrapper.find('[data-item]');
this.ratio = config.ratio;
this.elementWidth = this.wrapper.width() / config.ratio;
this.order = config.order;
this.bias = config.bias || 0;
this.totalHeight = 0;
createGrid();
};
interfaceModel.getRandomColor = function() {
var colors = ['#5D6D7E', '#34495E', '#2E4053', '#283747', '#212F3C', '#2C3E50', '#5D6D7E',
'#566573'];
return colors[Math.floor(Math.random() * colors.length)];
};
// private interface
function createGrid() {
setPosition();
setDataAttributes();
// if any images appears, w8 4 it load for correct offset of block
if (interfaceModel.elements.find('img').length) {
// imagesLoaded from https://github.com/desandro/imagesloaded
interfaceModel.wrapper.imagesLoaded(function() {
setBlockStyles();
});
} else {
setBlockStyles();
}
};
function setBlockStyles() {
var count = 0;
var linkedElement;
interfaceModel.elements.each(function(index, el) {
if (count === interfaceModel.ratio) {
count = 0;
};
setColor(el);
el.style.left = interfaceModel.elementWidth * (count++) + 'px';
linkedElement = interfaceModel.elements[index - interfaceModel.ratio];
if (linkedElement) {
el.style.top = linkedElement.dataset.offset + 'px';
el.dataset.offset = Number(linkedElement.dataset.offset) + el.offsetHeight;
} else {
el.style.top = 0 + 'px';
el.dataset.offset = el.offsetHeight;
if (interfaceModel.order === 'even' && interfaceModel.bias) {
if (index % 2 === 0) {
el.style.top = parseInt(el.style.top) + interfaceModel.bias + 'px';
el.dataset.offset = parseInt(el.dataset.offset) + interfaceModel.bias;
}
} else if (interfaceModel.order === 'odd' && interfaceModel.bias) {
if (index % 2 !== 0) {
el.style.top = parseInt(el.style.top) + interfaceModel.bias + 'px';
el.dataset.offset = parseInt(el.dataset.offset) + interfaceModel.bias;
}
}
};
if (interfaceModel.totalHeight < el.dataset.offset) {
interfaceModel.totalHeight = el.dataset.offset;
};
setTimeout(function() {
el.classList.add('show')
}, 100 * el.dataset.order);
});
setParentHeight();
}
function setColor(el) {
el.style.backgroundColor = interfaceModel.getRandomColor();
};
function setDataAttributes() {
var order = 1;
$.each(interfaceModel.elements, function(index, el) {
el.dataset.order = order++;
});
};
function setPosition() {
interfaceModel.wrapper.css({
'position': 'relative'
});
interfaceModel.elements.css({
'position': 'absolute',
'width': interfaceModel.elementWidth
});
};
function setParentHeight() {
interfaceModel.wrapper.css({
'height': interfaceModel.totalHeight
})
};
return interfaceModel;
})();
$(document).ready(function() {
// grid init
AbsoluteGrid.init({
container: '.items-wrapper', // parent container
ratio: 5, // how many items in the row
order: 'even', // offset order -> 'even/odd'
bias: 100 // offset of items from the top
});
// modal init
showModal.init({
target: '.item-info',
targetParent: '.items-wrapper',
modal: '.modal'
});
});
// modal
var showModal = (function() {
var interfaceModel = {};
var img;
var views;
var comments;
var likes;
var text;
var currentItem;
interfaceModel.init = function(config) {
this.target = config.target;
this.targetParent = $(config.targetParent);
this.modal = $(config.modal);
img = this.modal.find('[data-img]');
views = this.modal.find('[data-views]');
comments = this.modal.find('[data-comments]');
likes = this.modal.find('[data-likes]');
text = this.modal.find('[data-content]');
eventManager();
};
function eventManager() {
interfaceModel.targetParent.on('click', interfaceModel.target, onItemClickHandler);
interfaceModel.modal.on('click', '.modal-close', onCloseClickHandler);
$(document).on('click', onDocumentClickHandler);
};
function onItemClickHandler(evt) {
var $this = $(this);
currentItem = $this.closest('[data-item]');
// a 'little bit' rough for demo purpose
img.attr('src', currentItem.find('img').attr('src'))
views.text(currentItem.find('.views').text());
comments.text(currentItem.find('.comments').text());
likes.text(currentItem.find('.likes').text());
text.html('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, atque. Veritatis, fugiat sapiente, dolorum laborum quaerat molestias, placeat sunt exercitationem aliquam corrupti voluptatem cupiditate.</p><p>quis repellat illo commodi dolorem! Molestias minus, illo rerum nihil ea architecto incidunt quae eveniet delectus!</p>');
interfaceModel.modal.addClass('show');
};
function onDocumentClickHandler(evt) {
var $target = $(evt.target);
if(!$target.closest(interfaceModel.modal).length && !$target.closest($(interfaceModel.target)).length) {
if(interfaceModel.modal.is(":visible")) {
interfaceModel.modal.removeClass('show');
}
}
};
function onCloseClickHandler(evt) {
$(this).closest(interfaceModel.modal).removeClass('show');
};
return interfaceModel;
})()
External CSS
This Pen doesn't use any external CSS resources.