Membuat Efek Gambar dengan CSS

Pada postingan kali ini saya akan membagikan sedikit trik CSS untuk membuat efek pada gambar atau image di blog. Efek yang dimaksud di sini adalah penambahan efek hover dengan CSS yang akan bekerja ketika kursor mouse melewati atau berada di atas gambar. Banyak sekali jenis efek hover ini akan mempercantik tampilan gambar yang kita gunakan di blog. Beberapa diantaranya seperti efek zoom, transparan, bergulung, berputar dan masih banyak lainnya.

Berikut ini contoh dari gambar yang diberikan efek hover goyang,

Cantik gak? hhe.. Oke langsung saja kita bereksperimen membuat efek gambar dengan CSS.

Kode HTML

Kode HTML yang kita gunakan adalah:

<img src="url_gambar" />

Kode CSS

Efek glow

img {
    margin: 5px;
    border: 10px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
img:hover { 
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

demo

Efek Goyang

img {
    margin: 5px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);

demo

Efek zoom

img {
    margin: 5px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

img:  hover {
        -o-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
        -webkit-transform: scale(1.3); }

demo

Efek transparan

img {
    margin: 5px;
    border: 10px solid #eee;
    opacity:0.5;
}
img:hover { 
    opacity:1;
} 

 demo

Efek daun

img {
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
img:hover {
border-radius: 0% 50%;
box-shadow: 0px 0px 15px #fff;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

demo

Efek bergulung

img {
-webkit-transition-duration:.4s;
}

img:hover {
filter: alpha(opacity=60);
opacity: .9.9;border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

demo

Untuk demo menyusul karena saya mau tidur dulu ya. Selamat berkreasi membuat efek gambar dengan CSS.