<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<article>
<div class="item-wrapper">
<figure>
<div class="image" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLR0dpLWJDU3lMc28);"></div>
<div class="lighting"></div>
</figure>
<div class="item-content">
<h1>First Article Title</h1>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit</p>
<div class="author">Jordan Quinn</div>
</div>
</div>
</article>
<article>
<div class="item-wrapper">
<figure>
<div class="image" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRmNpcE93R2YtcEE);"></div>
<div class="lighting"></div>
</figure>
<div class="item-content">
<h1>Second Article Title</h1>
<p>Donec pede justo fringilla vel aliquet nec vulputate eget arcu</p>
<div class="author">Edna Hardy</div>
</div>
</div>
</article>
<article>
<div class="item-wrapper">
<figure>
<div class="image" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTl4V183QkdOZG8);"></div>
<div class="lighting"></div>
</figure>
<div class="item-content">
<h1>Third Article Title</h1>
<p>In enim justo rhoncus ut imperdiet a venenatis vitae justo</p>
<div class="author">Kayla Beck</div>
</div>
</div>
</article>
<script>
var articles = $('article > .item-wrapper'),
lightingRgb = '255,255,255';
articles.mousemove(function(e) {
var current = $(this),
x = current.width() - e.offsetX * 2,
y = current.height() - e.offsetY * 2,
rx = -x / 30,
ry = y / 24,
deg = Math.atan2(y, x) * (180 / Math.PI) + 45;
current.css({"transform":"scale(1.05) rotateY("+rx+"deg) rotateX("+ry+"deg)"});
$('figure > .lighting',this).css('background','linear-gradient('+deg+'deg, rgba('+lightingRgb+',0.32) 0%, rgba('+lightingRgb+',0) 100%)');
});
articles.on({
'mouseenter':function() {
var current = $(this);
current.addClass('enter ease').removeClass("leave");
setTimeout(function(){
current.removeClass('ease');
}, 280);
},
'mouseleave':function() {
var current = $(this);
current.css({"transform":"rotate(0)"});
current.removeClass('enter').addClass("leave");
$('figure > .lighting',this).removeAttr('style');
}}
);
</script>
@import url(//fonts.googleapis.com/css?family=Lato:300);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Lato, Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
background-color: #f1f1f1;
color: #464646;
text-align: center;
margin: 0 auto;
}
body a, body a:visited {
color: #555;
text-decoration: none;
}
body a:hover {
color: #444;
}
article figure::after, article figure .image, article figure .lighting, article .item-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
article .item-wrapper, article .item-content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
article .item-wrapper, article figure, article .item-content {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
article {
position: relative;
display: inline-block;
vertical-align: top;
width: calc(33.33% - 4%);
height: 24vw;
margin: 1.8%;
-webkit-perspective: 1600px;
perspective: 1600px;
cursor: pointer;
}
article .item-wrapper {
width: 100%;
height: 100%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
article .item-wrapper::before {
content: '';
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
box-shadow: 0 8px 38px rgba(0, 0, 0, 0.86);
}
article .item-wrapper:hover::before {
box-shadow: 0 14px 64px rgba(0, 0, 0, 0.92);
}
article .item-wrapper.enter.ease, article .item-wrapper.leave {
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
article figure {
width: 100%;
height: 100%;
}
article figure::after {
content: '';
background-color: rgba(0, 0, 0, 0.06);
}
article figure .image {
background-position: center;
background-size: cover;
}
article figure .lighting {
background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
}
article .item-content {
pointer-events: none;
padding: 20% 20px 20px;
color: #fff;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.76);
}
article .item-content h1 {
margin-bottom: 5%;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
article .item-content p {
font-size: 13px;
margin-bottom: 5%;
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
article .item-content .author {
-webkit-transform: translateZ(70px);
transform: translateZ(70px);
}
@media (max-width: 860px) {
article {
width: calc(50vw - 3.9vw);
height: 38vw;
}
}
@media (max-width: 667px) {
article {
width: calc(100vw - 3.9vw);
height: 60vw;
}
}
