MULTI HOVER EFFECT - pada kesempatan kali ini saa akan share MULTI HOVER EFFECT demonya bisa anda lihat di bawah ini ...
CARA PEMASANGAN
- masuk blogger.com
- klik menu edit HTML
- cari kode </head>
- tambahkan kode di bawah ini tepat di atas kode </head>
<style>
/* The container and the image */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}
/* The texts that, by default, are hidden */
div.multi-hover span {
color: #FFF;
font-size: 32px;
font-weight: bold;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s;
width: 100%;
}
/* And this is what will generate the effect */
div.multi-hover span:nth-child(1) { /* right */
background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* top */
background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* left */
background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bottom */
background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6);
left: 0;
top: 80%;
}
div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}
</style>
- klik simpan template.
- pada post mode HTML masukan kode di bawah ini
<div class=multi-hover>
<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpelsicJUsSimWUWOQt2SFseCS4_CrDVJ3I-TmFDGusUqYfeSV1nyhuTOg8V25SksNwef9w6nhF2yui6KngGFF5lViqI7UoSMawxCKKh39mue_DT0MceE1lGtDzcyxA60F5kXMdiT1G1M/s1600/flowers">
</div>
- ganti teks yang berwarna biru dengan url gambar
- ganti hover right,hover top,hover left,hover bottom dengan teks yang sobat inginkan
3 comments
coba koment dengan sintax
div.multi-hover span { color: #FFF; font-size: 32px; font-weight: bold; height: 100%; opacity: 0; position: absolute; text-align: center; transition: all 0.3s linear 0s; width: 100%; } - See more at: http://chenkho.blogspot.com/2014/03/multi-hover-effect.html#sthash.iRXrkbXO.dpuf
kan sudah bisa itu mas :)
wah makasih banyak ya mba leony
berkomentarlah sesuka anda
===>no link aktiv<===
NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar