Multidirection div hover

Framework 1 :

Framework 2 :

+ Js file(s) :	//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="22d" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

body {
  font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  background-color:#fff;
}

.wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 10em;
  height: 10em;
  transform: translateZ(0);
}

.b1, .b2, .b3, .b4 {
  position: absolute;
  z-index: 1;
  width: 71%;
  height: 71%;
  transform: rotate(45deg);
}

.b1 {
  top: 0;
  right: 0;
  transform-origin: 100% 0;
}
.b2 {
  bottom: 0;
  right: 0;
  transform-origin: 100% 100%;
}
.b3 {
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
}
.b4 {
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.b1:hover, .b2:hover, .b3:hover, .b4:hover {
  z-index: 9;
  width: 100%;
  height: 100%;
  transform: none;
}

.mdiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 10em;
  background: #333;
  color: #FFF;
  /* Restore lost antialiasing after translateZ */
  -webkit-font-smoothing: subpixel-antialiased;
  transition: all .3s ease;
  box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
}

.b1:hover ~ .mdiv {
  transform: translate(0, 100%);
}
.b2:hover ~ .mdiv {
  transform: translate(-100%, 0);
}
.b3:hover ~ .mdiv {
  transform: translate(0, -100%);
}
.b4:hover ~ .mdiv {
  transform: translate(100%, 0);
}

Javascript

Multidirection div hover

Link :

Fork button :

Embed preview :