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:
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:
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):
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-opacity
w3-hover-grayscale
w3-hover-sepia
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">Ganti link warna merah dengan link photo atau gambar kalian sendiri.
<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>