Multi Hover Effect Pada Blogger Images Menggunakan CSS Murni

Hari ini saya akan menunjukkan kepada Anda bagaimana untuk menambahkan efek mouseover luar biasa untuk Blogger gambar hanya menggunakan CSS, di mana 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 ketika menggerakkan mouse di atas mereka, tetapi juga akan memungkinkan Anda untuk menambahkan di dalam teks dengan deskripsi. 

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

melayang-layang melayang-layang kanan atas melayang-layang kiri bawah melayang-layang

MENAMBAHKAN HOVER EFFECT 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 kode area, tekan tombol CTRL + F dan ketik di kotak pencarian. 

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

 <style>
/ * Wadah dan gambar * /
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: tengah;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-melayang-layang img {width: 100%;}

/ * Teks-teks yang, secara default, yang tersembunyi * /
div.multi-melayang-layang rentang {
color: # FFF;
font-size: 32px;
font-weight: bold;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transisi: all 0.3s 0s linear;
width: 100%;
}

/ * Dan ini adalah apa yang akan menghasilkan efek * /
rentang div.multi-melayang-layang: n-anak (1) {/ * kanan * /
background: none repeat scroll 0 0 RGBA (255, 189, 36, 0.6);
kiri: 90%;
top: 0;
}
rentang div.multi-melayang-layang: n-anak (2) {/ * atas * /
background: none repeat scroll 0 0 RGBA (106, 170, 255, 0.6);
kiri: 0;
top: -80%;
}
rentang div.multi-melayang-layang: n-anak (3) {/ * kiri * /
background: none repeat scroll 0 0 RGBA (204, 87, 166, 0.6);
kiri: -90%;
top: 0;
}
rentang div.multi-melayang-layang: n-anak (4) {/ * bottom * /
background: none repeat scroll 0 0 RGBA (97, 181, 115, 0.6);
kiri: 0;
top: 80%;
}

rentang div.multi-melayang-layang: hover {opacity: 1;}
rentang div.multi-melayang-layang: n-anak (2n +1): hover {left: 0;}
rentang div.multi-melayang-layang: n-anak (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 Posts, membuat New Post, klik pada tab HTML (1) dan paste kode ini di dalam kotak kosong: 

 <div class=multi-hover>
<span> melayang tepat </ span>
<span> membawa top </ span>
<span> melayang ke kiri </ span>
<span> melayang-layang bawah </ span>
<img src=" "> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZl_3R9u7dXQDopPs89D1-JcQbJwn_DJbTr6tUfxncvq7vvyqChzy-XzWt_YVHrChSan8ykGhXgeEpeDqN_1F9vIn5nbshWbyIiBzgBKRYpUtGkhcL5O4Upa_aYisYjyRm1JoA1LCpR6g/s1600/flowers
</ Div>

Tambahkan sendiri text / deskripsi untuk "melayang-layang tepat", "melayang-layang top", "melayang-layang 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 Publish (4) 

Dan itu saja ... nikmatilah! :)