Nah Sob...Admin Akan Menshare Trick Baru CSS Multi Hover Nih...
Cukup Keren Sih...
Langsung Aja...
- Cari Kode /b:skin
- Kemudian Pastekan CSS Ini Diatasnya
.b-block{position:relative;display:inline-block;overflow:hidden;width:10em;height:10em;vertical-align:middle;-webkit-transform:translateZ(0)}
.b-block__hoverer{position:absolute;z-index:1;width:71%;height:71%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.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}
.b-block__hoverer:hover{z-index:9;width:100%;height:100%;-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}
.b-block__content{position:absolute;top:0;left:0;width:100%;height: 100%;text-align:center;line-height:10em;background:#333;color:#FFF;
-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; }
.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)}
- Kemudian Masuk Tata Letak > Tambah Gadget > HTML > Pastekan
- Bisa Di Entri Tapi Pilih HTML Jangan Compose
- Pastekan Kode Dibawah Ini
<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 disini!
</div>
</div>
<span> ←</span>
<p>↑</p>
Title : Efek Multi Hover
Description : DEMO Nah Sob...Admin Akan Menshare Trick Baru CSS Multi Hover Nih... Cukup Keren Sih... Langsung Aja... Cari Kode /b:skin Kemudian ...
