HTML
<p>Try to hover this block from different directions</p>
<p>↓</p>
<span>→ </span>
<div class="b-block">
<div class="b-block__hoverer"></div>
<div class="b-block__hoverer"></div>
<div class="b-block__hoverer"></div>
<div class="b-block__hoverer"></div>
<div class="b-block__content">
Hover me!
</div>
</div>
<span> ←</span>
<p>↑</p>
CSS
/* The wrapper */
.b-block {
position: relative;
display: inline-block;
overflow: hidden;
width: 10em;
height: 10em;
vertical-align: middle;
-webkit-transform: translateZ(0);
}
/* The blocks that would be hovered */
.b-block__hoverer {
position: absolute;
z-index: 1;
width: 71%;
height: 71%;
}
/* Positioning for hoverers */
.b-block__hoverer:nth-child(1) {
top: 0;
right: 0;
}
.b-block__hoverer:nth-child(2) {
bottom: 0;
right: 0;
}
.b-block__hoverer:nth-child(3) {
bottom: 0;
left: 0;
}
.b-block__hoverer:nth-child(4) {
top: 0;
left: 0;
}
/* Enlarge the hoverer to cover the whole area */
.b-block__hoverer:hover {
z-index: 9;
width: 100%;
height: 100%;
}
/* Styles for content block */
.b-block__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 10em;
background: #333;
color: #FFF;
/* Restore the antialiasing lost from translateZ */
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
-moz-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
}
/* Move the content block while hovering different blocks */
.b-block__hoverer:nth-child(1):hover ~ .b-block__content {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.b-block__hoverer:nth-child(2):hover ~ .b-block__content {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.b-block__hoverer:nth-child(3):hover ~ .b-block__content {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.b-block__hoverer:nth-child(4):hover ~ .b-block__content {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/* Just for aestetics */
BODY {
padding: 2em;
font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
