Beberapa Efek Mouse Hover di HTML CSS3


Ada banyak cara untuk memberi efek hover pada gambar di postingan blog, salah satunya yaitu efek image dengan CSS3 dan JQuery, namun kali ini proBlogiz menggunakan code CSS 3. Pada artikel 7 Efek Hover CSS 3 Keren pada Gambar ini, Anda juga dapat melihat semua live demo dari contoh aneka efek hover keren pada gambar, seperti Efek hover Transparan, Efek hover zoom, spin, border, transform dan yang lain dibawah ini serta code CSS 3 yang bisa Anda copy dan diletakkan di blog atau template Anda.

Efek gambar atau juga disebut Efek hover, tersebut akan terlihat ketika mouse didekatkan pada gambar yang bersangkutan atau diarahkan dengan mouse/pointer pada gambar tersebut, gambar juga dapat berupa link yang tertuju pada sebuah URL tertentu tetapi bisa juga tanpa link samasekali.
Penggunaan efek atau hover effect pada gambar/image pada postingan Anda, selain menambah cantik tampilan blog juga memperbesar kemungkinan peningkatan pageview blog dikarenakan pengunjung atau visitor tentu akan lebih betah berlama-lama di blog Anda. Dan kemungkinan mengunjungi blog Anda kembali lebih terbuka…..ya kenapa tidak dicoba saja sob!!!!

 

Berikut Contoh 7 Efek Hover Keren pada Gambar dengan Code CSS 3

 

Contoh 1
Efek Hover Transparan (CSS Image Opacity)

Efek dengan merubah Image Opacity gambar dari 0.1 sampai 1.0

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

note :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);
}

note : 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);
}

note : 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);
}

note : 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;
}

note : ganti border sesuai selera


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s