27 March 2014

MULTI HOVER EFFECT

MULTI HOVER EFFECT

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.
CARA PEMAKAIAN
  • 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