By Hugh Balboa
Simple Box Hover Effect
hughbalboa@m-33.com www.m-33.com
A Pen by Hugh Balboa on CodePen.
By Hugh Balboa
Simple Box Hover Effect
hughbalboa@m-33.com www.m-33.com
A Pen by Hugh Balboa on CodePen.
<header> | |
<div class='container'> | |
<h1>HOVER EFFECT</h1> | |
<p><h2>CSS & jQuery</h2></p> | |
</div> | |
</header> | |
<div class='container-inner'> | |
<ul> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
<li> | |
<div class='info'> | |
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> | |
</div> | |
</li> | |
</ul> | |
</div> |
// - 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) { | |
addClass( ev, this, 'in' ); | |
}, false); | |
el.addEventListener('mouseout', function (ev) { | |
addClass( ev, this, 'out' ); | |
}, false); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
.container-inner { | |
float:left; | |
width:100%; | |
} | |
.container { | |
width: auto !important; | |
} | |
li { | |
background-color: rgba(256, 18, 156, 0.9); | |
-webkit-perspective: 360px; | |
perspective: 360px; | |
} | |
.info { | |
-webkit-transform: rotate3d(1, 0, 0, 90deg); | |
transform: rotate3d(1, 0, 0, 90deg); | |
width: 100%; | |
height: 100%; | |
padding: 0px 10px; | |
position: absolute; | |
top: 0; | |
left: 0; | |
border-radius: 4px; | |
pointer-events: none; | |
background-color: rgba(26, 88, 156, 0.9); | |
} | |
div.info p{ | |
color:#fff; | |
} | |
.in-top .info { | |
-webkit-transform-origin: 50% 0%; | |
-ms-transform-origin: 50% 0%; | |
transform-origin: 50% 0%; | |
-webkit-animation: in-top 300ms ease 0ms 1 forwards; | |
animation: in-top 300ms ease 0ms 1 forwards; | |
} | |
.in-right .info { | |
-webkit-transform-origin: 100% 0%; | |
-ms-transform-origin: 100% 0%; | |
transform-origin: 100% 0%; | |
-webkit-animation: in-right 300ms ease 0ms 1 forwards; | |
animation: in-right 300ms ease 0ms 1 forwards; | |
} | |
.in-bottom .info { | |
-webkit-transform-origin: 50% 100%; | |
-ms-transform-origin: 50% 100%; | |
transform-origin: 50% 100%; | |
-webkit-animation: in-bottom 300ms ease 0ms 1 forwards; | |
animation: in-bottom 300ms ease 0ms 1 forwards; | |
} | |
.in-left .info { | |
-webkit-transform-origin: 0% 0%; | |
-ms-transform-origin: 0% 0%; | |
transform-origin: 0% 0%; | |
-webkit-animation: in-left 300ms ease 0ms 1 forwards; | |
animation: in-left 300ms ease 0ms 1 forwards; | |
} | |
.out-top .info { | |
-webkit-transform-origin: 50% 0%; | |
-ms-transform-origin: 50% 0%; | |
transform-origin: 50% 0%; | |
-webkit-animation: out-top 300ms ease 0ms 1 forwards; | |
animation: out-top 300ms ease 0ms 1 forwards; | |
} | |
.out-right .info { | |
-webkit-transform-origin: 100% 50%; | |
-ms-transform-origin: 100% 50%; | |
transform-origin: 100% 50%; | |
-webkit-animation: out-right 300ms ease 0ms 1 forwards; | |
animation: out-right 300ms ease 0ms 1 forwards; | |
} | |
.out-bottom .info { | |
-webkit-transform-origin: 50% 100%; | |
-ms-transform-origin: 50% 100%; | |
transform-origin: 50% 100%; | |
-webkit-animation: out-bottom 300ms ease 0ms 1 forwards; | |
animation: out-bottom 300ms ease 0ms 1 forwards; | |
} | |
.out-left .info { | |
-webkit-transform-origin: 0% 0%; | |
-ms-transform-origin: 0% 0%; | |
transform-origin: 0% 0%; | |
-webkit-animation: out-left 300ms ease 0ms 1 forwards; | |
animation: out-left 300ms ease 0ms 1 forwards; | |
} | |
@-webkit-keyframes in-top { | |
from { | |
-webkit-transform: rotate3d(-1, 0, 0, 90deg); | |
transform: rotate3d(-1, 0, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@keyframes in-top { | |
from { | |
-webkit-transform: rotate3d(-1, 0, 0, 90deg); | |
transform: rotate3d(-1, 0, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@-webkit-keyframes in-right { | |
from { | |
-webkit-transform: rotate3d(0, -1, 0, 90deg); | |
transform: rotate3d(0, -1, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@keyframes in-right { | |
from { | |
-webkit-transform: rotate3d(0, -1, 0, 90deg); | |
transform: rotate3d(0, -1, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@-webkit-keyframes in-bottom { | |
from { | |
-webkit-transform: rotate3d(1, 0, 0, 90deg); | |
transform: rotate3d(1, 0, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@keyframes in-bottom { | |
from { | |
-webkit-transform: rotate3d(1, 0, 0, 90deg); | |
transform: rotate3d(1, 0, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@-webkit-keyframes in-left { | |
from { | |
-webkit-transform: rotate3d(0, 1, 0, 90deg); | |
transform: rotate3d(0, 1, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@keyframes in-left { | |
from { | |
-webkit-transform: rotate3d(0, 1, 0, 90deg); | |
transform: rotate3d(0, 1, 0, 90deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
} | |
@-webkit-keyframes out-top { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(-1, 0, 0, 104deg); | |
transform: rotate3d(-1, 0, 0, 104deg); | |
} | |
} | |
@keyframes out-top { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(-1, 0, 0, 104deg); | |
transform: rotate3d(-1, 0, 0, 104deg); | |
} | |
} | |
@-webkit-keyframes out-right { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, -1, 0, 104deg); | |
transform: rotate3d(0, -1, 0, 104deg); | |
} | |
} | |
@keyframes out-right { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, -1, 0, 104deg); | |
transform: rotate3d(0, -1, 0, 104deg); | |
} | |
} | |
@-webkit-keyframes out-bottom { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(1, 0, 0, 104deg); | |
transform: rotate3d(1, 0, 0, 104deg); | |
} | |
} | |
@keyframes out-bottom { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(1, 0, 0, 104deg); | |
transform: rotate3d(1, 0, 0, 104deg); | |
} | |
} | |
@-webkit-keyframes out-left { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 1, 0, 104deg); | |
transform: rotate3d(0, 1, 0, 104deg); | |
} | |
} | |
@keyframes out-left { | |
from { | |
-webkit-transform: rotate3d(0, 0, 0, 0deg); | |
transform: rotate3d(0, 0, 0, 0deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 1, 0, 104deg); | |
transform: rotate3d(0, 1, 0, 104deg); | |
} | |
} | |
/* you can ignore this ones */ | |
ul { | |
margin: 0 auto; | |
padding: 0; | |
width: 575px; | |
} | |
ul:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
li { | |
position: relative; | |
float: left; | |
width: 180px; | |
height: 180px; | |
margin: 5px; | |
padding: 0; | |
list-style: none; | |
} | |
li a { | |
display: inline-block; | |
vertical-align: top; | |
text-decoration: none; | |
border-radius: 4px; | |
} | |
li h3 { | |
margin: 0; | |
font-size: 16px; | |
color: rgba(255, 255, 255, 0.9); | |
} | |
li p { | |
font-size: 12px; | |
line-height: 1.5; | |
color: rgba(255, 255, 255, 0.8); | |
} | |
li .normal { | |
width: 100%; | |
height: 100%; | |
background-color: #ECF0F1; | |
color: rgba(52, 73, 94, 0.6); | |
box-shadow: inset 0 2px 20px #e6ebed; | |
text-align: center; | |
font-size: 50px; | |
line-height: 200px; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family:'Lato'; | |
background-color: #0b2b2b; | |
} | |
h2{ | |
color:#fff; | |
} | |
h1 { | |
margin: 0 auto 5px; | |
text-align: center; | |
color:#fff; | |
} | |
h3 { | |
font-family: 'Lato', serif; | |
color:#fff; | |
} | |
.container { | |
width: 100%; | |
margin: 0 auto; | |
} | |
header { | |
font-family: 'Lato', serif; | |
text-align: center; | |
margin: 50px 0 25px; | |
color: #34495E; | |
} | |
header p { | |
margin: 0; | |
color: rgba(52, 73, 94, 0.4); | |
} |
Tried to implement this in Meteor but when I replace the