Cara Melayanglah Efek Pada Gambar Pada Blogger Murni dan CSS

-->

Windows Blue Free | Berikut Cara Melayanglah Efek Pada Gambar Pada Blogger Murni dan CSS | Cara Melayanglah Efek Pada Gambar Pada Blogger Murni dan CSS | Hari ini saya akan menunjukkan kepada Anda bagaimana untuk menambahkan efek Gunaka mouse menakjubkan untuk gambar Blogger hanya menggunakan CSS, yang menggerakkan mouse Anda di atas gambar dari arah yang berbeda (dari atas, dari bawah, dll) akan menyebabkan overlay dialihkan dalam dari vektor yang sama. Trik ini akan mengubah tidak hanya penampilan gambar saat menggerakkan mouse atas mereka, tetapi juga akan memungkinkan Anda untuk menambahkan dalam teks dengan deskripsi.

Anda dapat melihat efek pada gambar di bawah ini: mencoba menggerakkan mouse Anda dari kiri, kanan, dan atas.

Menambahkan Melayanglah Efek Dari Arah berbeda pada Blogger Images

Pertama yang harus dilakukan adalah dengan menambahkan gaya CSS untuk Template kami:

Langkah 1. Dari Blogger Dashboard, pergi ke Template dan tekan tombol Edit HTML

Langkah 2. Cari </ head> tag - untuk menemukannya, klik di mana saja di dalam area kode, tekan CTRL + F dan ketik di kotak pencarian.

Langkah 3. Setelah Anda menemukannya, tambahkan gaya berikut tepat di atasnya:

______________________________________________
" <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> "
__________________________________________

Langkah 4. Simpan Template

Sekarang kita akan menambahkan HTML yang tidak lain adalah DIV mana kita termasuk empat tag SPAN dengan teks dan gambar:

Langkah 5. Pilih Tulisan, membuat New Post, klik pada tab HTML (1) dan paste kode ini di dalam kotak kosong:

__________________________________________

<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/AVvXsEifQpQgL1WoBiu7PaFxapBxmCA_0cI9-tB40_Xfz65zt8O0VLVy2NDve7rf508mOO8i1oPmls2tqAlwcBRTQgZ3MFFWLqa4Z1XGWcxHHMd8elV-6ONITjGEQblBLegJIxYCfiPMrZ_qDc4/s1600/flowers">
</div>

_________________________________________

Tambahkan teks / keterangan Anda sendiri untuk "melayang-layang tepat", "melayang-layang top", "membawa kiri" dan "melayang-layang bawah" (2) dan mengganti url dengan warna biru dengan URL gambar (3) di mana Anda ingin menerapkan efek.

Penting! Jangan klik pada tab Compose, jika perubahan akan hilang.

Langkah 6. Setelah Anda selesai mengedit posting Anda, klik Publikasikan (4)


Anda Baru saja membaca artikel "Cara Melayanglah Efek Pada Gambar Pada Blogger Murni dan CSS " semoga artikel ini dapat memberikan informasi yang bermanfaat untuk anda semua, Jangan lupa tetap update artikel terbaru Windows Blue Free

-->