<!--[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;
}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.