Contoh-contoh CSS Scipt Hover Gambar Cantik

Perlu dibaca juga :

Contoh 1

Efek Hover Transparan (CSS Image Opacity)

Efek ini terjadi dengan merubah Image Opacity gambar dari 0.1 sampai 1.0

Code  CSS nya :

.img1:hover {opacity:0.3;filter:alpha(opacity=30); /* For IE8 and earlier */

catatan :ganti opacity 0.3 dan 30 sesuai selera Anda

Contoh 2

Efek Hover Berputar ( 360 degree rotate image )

.img2{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .img2:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

catatan : ganti rotation degree 360deg sesuai selera

Contoh 3

Efek Hover Spin and Zoom 

.img3 { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .img3:hover { -webkit-transform: scale(1.2) rotate(1080deg); -moz-transform: scale(1.2) rotate(1080deg); -o-transform: scale(1.2) rotate(1080deg); -ms-transform: scale(1.2) rotate(1080deg); transform: scale(1.2) rotate(1080deg); }

catatan: ganti scale dari 1.2 sampai 1.5 untuk perbesar gambar

Contoh 4

Efek Hover Efek Zoom

.img4 { height:auto; transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .img4:hover { transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); box-shadow: 2px 2px 6px rgba(0,0,0,0.5); }

catatan: ganti scale 1.5 sesuai selera

Contoh 5

Efek Hover Efek Transform

.img5 { border-radius: 30px 0 30px 0; -moz-border-radius: 30px 0 30px 0; -webkit-border-radius: 30px 0 30px 0; -o-border-radius: 30px 0 30px 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .img5:hover { box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5); border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; }

Contoh 6

Efek Hover Efek Moving

.img6 { box-shadow: 0 3px 6px rgba(0,0,0,.25); transform: rotate(+2deg); -o-transform: rotate(+2deg); -webkit-transform: rotate(+2deg); -moz-transform: rotate(+2deg); } .img6:hover { box-shadow: 0 3px 6px rgba(0,0,0,.5); transform: rotate(-1deg); -webkit-transform: rotate(-1deg); -o-transform: rotate(-1deg); -moz-transform: rotate(-1deg); }

Contoh 7

Efek Hover Efek Border Transform

.img7 { border:5px solid #0000ff; } .img7:hover { border:8px solid #00ff00; }

catatan : ganti border sesuai selera

ARTIKEL TERKAIT :