Untitled

<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>

body {

    font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;

    text-align: center;

}

/* 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%;

    -webkit-transform: rotate(45deg);

}

/* Positioning for hoverers */

.b-block__hoverer:nth-child(1) {

    top: 0;

    right: 0;

    -webkit-transform-origin: 100% 0;

       -moz-transform-origin: 100% 0;

         -o-transform-origin: 100% 0;

            transform-origin: 100% 0;

}

.b-block__hoverer:nth-child(2) {

    bottom: 0;

    right: 0;

    -webkit-transform-origin: 100% 100%;

       -moz-transform-origin: 100% 100%;

         -o-transform-origin: 100% 100%;

            transform-origin: 100% 100%;

}

.b-block__hoverer:nth-child(3) {

    bottom: 0;

    left: 0;

    -webkit-transform-origin: 0 100%;

       -moz-transform-origin: 0 100%;

         -o-transform-origin: 0 100%;

            transform-origin: 0 100%;

}

.b-block__hoverer:nth-child(4) {

    top: 0;

    left: 0;

    -webkit-transform-origin: 0 0;

       -moz-transform-origin: 0 0;

         -o-transform-origin: 0 0;

            transform-origin: 0 0;

}

/* Enlarge the hoverer to cover the whole area */

.b-block__hoverer:hover {

    z-index: 9;

    width: 100%;

    height: 100%;

    -webkit-transform: none;

       -moz-transform: none;

         -o-transform: none;

            transform: none;

}

/* 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);

}