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.
Hover Opacity à
.img1:hover
{
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
}
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);
}
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);
}
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);
}
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;
}
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);
}
Efek Hover Efek Border Transform à
.img7 {
border:5px
solid #0000ff;
}
.img7:hover
{
border:8px
solid #00ff00;
}
Siip... mantab blognya... bagus bagus :D
BalasHapusTerima kasih ...
Hapus