CARA MEMBUAT EFEK HOVER DENGAN W3-CSS

CSS memiliki banyak kemampuan efek visual yang sangat menarik. Mempelajari CSS berarti mempelajari teknik desain web yang akan menghasilkan sebuah pekerjaan yang sangat atraktif. Contoh di bawah adalah hasil trik W3-CSS yang saya pelajari dari situs w3school:
Silahkan sentuhkan jari agak lama jika menggunakan ponsel atau cursor mouse jika menggunakan laptop ke gambar gambar berikut di bawah untuk melihat efek W3-HOVER.
Note: class w3-hover-sepia tidak support browser lama, jadi jika kalian menggunakan browser tua tidak akan terlihat efeknya.
w3-hover-opacity - Gambar normal:
w3-hover-grayscale (kalau disentuh jadi abu abu):
w3-hover-sepia (kalau disentuh jadi warna sepia):
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Jika Kalian tertarik menulis tidak melulu melalui penulisan blogger opsi "compose" tetapi menulis melalui opsi "html" kalian bisa mencoba menerapkan kode berikut ke dalam halaman html di blogger kalian:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<p>w3-hover-opacity:</p>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoszW1lerOfZDsDQpGIxAUjR3zzOccegMaeBkIxtwduZyxO7jpWsg51fsWlbKou6A73KujLULYomusljctJp6-EsR34ULcD6olVvjmqXUhFbXusq5Ud4ZjjTOw5ca1YPfyStplWUpdTHZ/s1600/20181123_214033_rmedited.jpg" class="w3-hover-opacity" style="width:300px"></center>
<p>w3-hover-grayscale:</p>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoszW1lerOfZDsDQpGIxAUjR3zzOccegMaeBkIxtwduZyxO7jpWsg51fsWlbKou6A73KujLULYomusljctJp6-EsR34ULcD6olVvjmqXUhFbXusq5Ud4ZjjTOw5ca1YPfyStplWUpdTHZ/s1600/20181123_214033_rmedited.jpg" class="w3-hover-grayscale" style="width:300px"></center>
<p>w3-hover-sepia:</p>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoszW1lerOfZDsDQpGIxAUjR3zzOccegMaeBkIxtwduZyxO7jpWsg51fsWlbKou6A73KujLULYomusljctJp6-EsR34ULcD6olVvjmqXUhFbXusq5Ud4ZjjTOw5ca1YPfyStplWUpdTHZ/s1600/20181123_214033_rmedited.jpg" class="w3-hover-sepia" style="width:300px"></center>
<div class="w3-panel w3-blue w3-hover-opacity">
<p>w3-hover-opacity</p>
</div>
<div class="w3-panel w3-indigo w3-hover-grayscale">
<p>w3-hover-grayscale</p>
</div>
<div class="w3-panel w3-pink w3-hover-sepia">
<p>w3-hover-sepia</p>
</div>
</div>
Ganti link warna merah dengan link photo atau gambar kalian sendiri. 

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak