Login / Join
Multidirection div hover
submitted on 03/08/2014 by
Codicode
+ infos
Config
Embed
Share
Multidirection div hover
by
Codicode
Multidirection div hover
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.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
<p>Try to hover the block above from different directions</p> <div class="wrapper"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div class="b4"></div> <div class="mdiv"> Hello Hover </div> </div>
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
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact