"hover1"
Bootstrap 3.3.0 Snippet by Harut

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<ul class="masonry-list row">
<li class="tile-case col-md-4">
<a href="#">
<div class="tile-primary-content ">
<img src="http://albumcoverart.files.wordpress.com/2010/04/fleet-foxes-lp.jpg" alt="">
</div>
<div class="tile-secondary-content">
<h2>Music</h2>
<p>Fleet Foxes</p>
</div>
</a>
</li>
<li class="tile-job col-md-4">
<a href="#">
<div class="tile-primary-content">
<h2>Career</h2>
<p>We're looking for consultants and other experts in advertising</p>
</div>
<div class="tile-secondary-content">
<p>Apply now and become successful</p>
</div>
</a>
</li>
<li class="tile-facebook col-md-4">
<a href="#">
<div class="tile-primary-content">
<h2>Facebook</h2>
<p>Don't expect to reach us on the phone today. We're BBQing! :)</p>
</div>
<div class="tile-secondary-content">
<p>Like us on Facebook</p>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.masonry-list {
position: relativ;
top: 50%;
width: 960px;
}
.masonry-list li {
float: left;
height: 320px;
overflow: hidden;
padding: 0 1px 1px 0;
width: 320px;
}
.masonry-list li:focus a::after, .masonry-list li:hover a::after {
opacity: 1;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.masonry-list li:focus .tile-primary-content img, .masonry-list li:hover .tile-primary-content img {
-moz-transform: scale3d(1.2, 1.2, 0);
-webkit-transform: scale3d(1.2, 1.2, 0);
transform: scale3d(1.2, 1.2, 0);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transition: -moz-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
-o-transition: -o-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
-webkit-transition: -webkit-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
transition: transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
}
.masonry-list li:focus p,
.masonry-list li:focus h2,
.masonry-list li:focus .tile-secondary-content, .masonry-list li:hover p,
.masonry-list li:hover h2,
.masonry-list li:hover .tile-secondary-content {
opacity: 1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// - Noel Delgado | @pixelia_me
var nodes = document.querySelectorAll('li'),
_nodes = [].slice.call(nodes, 0);
var getDirection = function (ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
return d;
};
var addClass = function ( ev, obj, state ) {
var direction = getDirection( ev, obj ),
class_suffix = "";
obj.className = "";
switch ( direction ) {
case 0 : class_suffix = '-top'; break;
case 1 : class_suffix = '-right'; break;
case 2 : class_suffix = '-bottom'; break;
case 3 : class_suffix = '-left'; break;
}
obj.classList.add( state + class_suffix );
};
// bind events
_nodes.forEach(function (el) {
el.addEventListener('mouseover', function (ev) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React

Questions / Comments: