Multi hover effect on blogger image

Hari ini BIE akan menunjukkan kepada sobat bagaimana untuk menambahkan efek mouseover luar biasa untuk Blogger gambar hanya menggunakan CSS, di mana saat anda menggerakkan mouse Anda di atas gambar dari arah yang berbeda (dari atas, bawah, kiri, kanan) akan menyebabkan overlay dialihkan dalam dari vektor yang sama.
Trik ini akan mengubah tidak hanya penampilan gambar ketika menggerakkan mouse di atas mereka, tetapi juga akan memungkinkan Anda untuk menambahkan di dalam teks dengan deskripsi.
Lebih jelas nya silahkan sobat lihat langsung DEMO nya

Hover Right Hover Top Hover Left Hover Bottom

Coba arahkan kursor sobat kebagian samping Kiri, Kanan, Atas, Bawah gambar dan lihat reaksi nya,..

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </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;}

5. Kemudian simpan template sobat.

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<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/AVvXsEiRAd7Z3fTOSaNUvPYD7XxqPEtsCQG0rKbWJAdAkQdRkktANmNAQp2ZL8fEBCJBGuHIRO4z2PzmSAg5EP8T1w0tBjoVqrCGAyyrWMv8Sh1yRsZaqVZT28YrILE82pHvEq2fLipaR2uAbWO0/s1600/IMG_0093.JPG">
</div>

Kemudian klik Publish dan Lihat Hasil nya.
Jangan lupa di follow ya BLog saya

Multi hover effect on blogger image 2014-07-15T00:27:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown