Aneka Efek Hover Pada Gambar

Pada posting sebelumnya dijelaskan cara membuat effect nudging pada gambar dengan CSS, kali ini akan saya jelaskan cara membuat beberapa efek hover pada gambar dengan CSS.

Efek hover tersebut akan terlihat ketika mouse didekatkan pada gambar yang bersangkutan dimana gambar tersebut juga dapat berupa link yang tertuju pada sebuah URL tertentu tetapi bisa juga tanpa link terkait.

Untuk beberapa topik blog/ website, hover pada gambar dapat menjadi keunikan tersendiri sekaligus dapat menambah daya tarik pengunjung jika pemasangannya tidak berlebihan. Efek hover pada gambar seperti itu tentu saja dapat dibuat dengan Javascript tetapi penjelasan kali ini menggunakan CSS, berikut langkah-langkahnya:

1. Login ke Blogger
2. Back-up template yang akan diedit untuk jaga-jaga jika terjadi eror
3. Tempatkan salah satu kode CSS di bawah pada bagian desain HTML, pada Widget, atau pada posting (pilih salah satu saja). Jika ditempatakn di bagian desain HTML, tempatkan tepat di atas kode ]]></b:skin (kode <style type="text/css> dan </style>) pada kode CSS di bawah dihapus. Jika ditempatkan pada widget atau pada posting kedua kode tersebut tetap disertakan.
4. Salin salah satu kode HTML di bawah sesuai dengna kode CSS yang dipilih pada bagian yang dibutuhkan mislnya pada widget atau pada posting. Jika ditempatkan pada posting, pastikan Anda berada pada mode HTML (bukan mode Compose)
5. Simpan atau publish, selesai

Contoh hover gambar 1
Kode CSS

<style type="text/css"> 
.mode1{
   padding:10px;
   background:#fff;
   border:1px solid #fff; } 

.mode1:hover{
   padding:10px;
   background:#ffff00;
   border:1px solid #aaa; } 
</style>

Kode HTML

<img class="mode1" src="URL gambar" /> 

Hasilnya:


Contoh hover gambar 2
Kode CSS

<style type="text/css"> 
.mode2  {
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;  
    -ms-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out;    }  

.mode2:hover  {
    margin-left:50px;
    padding-left:5px;  } 

</style> 

Kode HTML

<img class="mode2" src="URL gambar" /> 

Hasilnya:

Contoh hover gambar 3
Kose CSS

<style type="text/css"> 
.mode3 {
   border:1px solid #0000ff; } 

.mode3:hover {
   background-color:#47b847;
   box-shadow: 5px 5px #aaa;
   -webkit-box-shadow: 5px 5px #aaa;
   -moz-box-shadow: 5px 5px 8px #4170cf; } 

</style> 

Kode HTML

<img class="mode3" src="URL gambar" /> 

Hasilnya:


Contoh hover gambar 4
Kode CSS

<style type="text/css"> 
.mode4 {
   border:1px solid #ccc;
   padding:10px; } 

.mode4:hover {
   border:1px dashed #ff0000;
   padding:10px; } 

</style> 

Kode HTML

<img class="mode4" src="URL gambar" /> 

Hasilnya:


Contoh hover gambar 5
Kode CSS

<style type="text/css"> 
.mode5 {
   -webkit-transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s; } 

.mode5:hover {
   -webkit-transform:scale(1.2);
   -moz-transform:scale(1.2);
   -o-transform:scale(1.2);
   opacity: 1;
   z-index: 2; } 

</style> 

Kode HTML

<img class="mode5" src="URL gambar" /> 

Hasilnya:


Contoh hover gambar 6
Kode CSS

<style type="text/css">  
.mode6 {
   opacity:0.5;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity:0.5; } 

.mode6:hover {
   opacity:1.0;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   -moz-opacity:1.0;
   -khtml-opacity:1; } 

</style> 

Kode HTML

<img class="mode6" src="URL gambar" /> 

Hasilnya:

Catatan
Efek hover gambar tersebut akan bekerja jika menggunakan browser internet terbaru. Selamat mencoba, semoga bermanfaat.