<!--[if lte IE 9]>
<style type="text/css">
ul{zoom:1.0}
* html ul{width:1000px;}
li{*display:inline;*zoom:1.0}
b {display:none;}
strong {left:0;top:-150px}
strong span {
display:block;
display:table-cell;
zoom:1.0;
}
a:hover{visibility:visible}
a:hover strong{top:0;opacity:1}
</style>
<![endif]-->
<!--[if lte IE 8]>
<style type="text/css">
ul{word-spacing:-.25em;}
li{word-spacing:0}
ul a{float:none;display:inline-block}
a strong{filter:Alpha(Opacity=0);}
a:hover strong{filter:Alpha(Opacity=60);}
strong span{position:relative}
</style>
<![endif]-->
<h1><a target="_blank" href="http://www.sitepoint.com/forums/showthread.php?1172173-CSS-only-Direction-aware-hover">CSS only Direction Aware Hover - Oct 2013</a> <small><a href="http://caniuse.com/#search=keyframes">Modern browsers only</a></small></h1>
<h2>With contributions from <a target="_blank" href="https://www.sitepoint.com/community/t/css-only-direction-aware-hover/35443">Sitepoint members</a></h2>
<ul>
<li><a href="#"><img src="https://picsum.photos/id/237/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>This is the message</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/227/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>This is another message</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/101/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>Message</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/27/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>Apart from this message which is longer still</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/137/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>This is the longest message so far</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/100/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>Apart from this message which is longer still</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/297/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>Even more Messages</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/23/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>This is nearly the last message</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/56/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>This is the penultimate message</span></strong></a></li>
<li><a href="#"><img src="https://picsum.photos/id/7/150/150" width="150" height="150" alt="sunset"><b></b> <b></b> <b></b> <b></b> <strong><span>Finally as the end of the messages</span></strong></a></li>
</ul>
<p>Move your mouse slowly across the image from one of 4 directions (North, East, West,South) and the overlay message will fly in from that side. <br>Using tab on the keyboard will just slide the message from the top</p>
<p>IE9 and under (down to IE6) just get a hover effect and no animation.</p>
h1, h2, p { text-align:center; }
h1 a {
color:blue;
-moz-transition:1s ease;
-webkit-transition:1s ease;
transition:.5s ease;
}
h1 a:hover {
background:#000;
color:#fff;
}
h1 small {
display:block;
padding:5px 0 0;
}
a img { border:none }
p {
width:50%;
margin:auto;
clear:both;
}
ul {
margin:0 auto;
padding:0;
list-style:none;
text-align:center;
max-width:1000px;
}
li { display:inline-block; }
ul a {
height:150px;
width:150px;
color:#000;
text-decoration:none;
position:relative;
border:2px solid #000;
border-radius:4px;
margin:20px;
overflow:hidden;
float:left;
box-shadow:5px 5px 15px rgba(0, 0, 0, 0.3);
}
ul a:focus{box-shadow:5px 5px 15px rgba(0, 0, 0, 0.7);}
ul a:focus strong{ animation: down .3s ease forwards;}
b {
display:block;
width:150px;
height:150px;
position:absolute;
z-index:2;
cursor:pointer;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background:url(images/fake.gif) no-repeat -1px -1px;/* ie10 fix */
}
b:nth-of-type(1) {
left: 0;
top: -106px;
}
b:nth-of-type(2) {
left: 0;
bottom: -106px;
}
b:nth-of-type(3) {
left: -106px;
top: 0;
}
b:nth-of-type(4) {
right: -106px;
top: 0;
}
b:hover {
top:0;
left: 0;
right: 0;
bottom: 0;
z-index:3;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
strong {
display:table;
width:150px;
height:150px;
background:rgb(65,105,225);
background:rgba(65,105,225,0.8);
position:absolute;
top:0;
opacity:0;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease;
transition:all .5s ease;
text-shadow:1px 1px 1px rgba(0,0,0,0.8)
}
strong span {
vertical-align:middle;
display:table-cell;
padding:5px;
text-align:center;
color:#fff;
}
b:nth-of-type(1):hover ~ strong {
-moz-animation:down .3s ease forwards;
-webkit-animation: down .3s ease forwards;
animation: down .3s ease forwards;
}
@-webkit-keyframes down { from {
-webkit-transform: translateY(-150px);
}
to {
-webkit-transform: translateY(0px);
opacity:1
}
}
@keyframes down { from {
transform: translateY(-150px);
}
to {
transform: translateY(0px);
opacity:1
}
}
b:nth-of-type(2):hover ~ strong {
-moz-animation:up .3s ease forwards;
-webkit-animation: up .3s ease forwards;
animation: up .3s ease forwards;
}
@-webkit-keyframes up { from {
-webkit-transform: translateY(150px);
}
to {
-webkit-transform: translateY(0px);
opacity:1;
}
}
@keyframes up { from {
transform: translateY(150px);
}
to {
transform: translateY(0px);
opacity:1;
}
}
b:nth-of-type(3):hover ~ strong {
-moz-animation:left .3s ease forwards;
-webkit-animation: left .3s ease forwards;
animation: left .3s ease forwards;
top:0;
}
@-webkit-keyframes left { from {
-webkit-transform: translateX(-150px);
}
to {
-webkit-transform: translateX(0px);
opacity:1;
}
}
@keyframes left { from {
transform: translateX(-150px);
}
to {
transform: translateX(0px);
opacity:1;
}
}
b:nth-of-type(4):hover ~ strong {
-moz-animation:right .3s ease forwards;
-webkit-animation: right .3s ease forwards;
animation: right .3s ease forwards;
top:0;
left:auto;
right:0;
}
@-webkit-keyframes right { from {
-webkit-transform: translateX(150px);
}
to {
-webkit-transform: translateX(0px);
opacity:1;
}
}
@keyframes right { from {
transform: translateX(150px);
}
to {
transform: translateX(0px);
opacity:1;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.