Macam Macam Efek Hover Keren Pada Gambar Di Blog

Macam Macam Efek Hover Keren Pada Gambar Di Blog

Macam Macam Efek Hover Keren Pada Gambar Di Blog - Assalamualaikum wr wb . Hai Sob Apa Kabar Nih ,, Lama Kita Gk Posting ya,, 2 hari yang lalu,,wah udah Sholat jum'at belum?? Kalo Saya sih udah nah setelah saya sholat jum'at saya meposting yaitu Macam Macam Efek Hover Keren Pada Gambar Di Blog
Tau Gk Kalo Gambar Di Kasih Efek Jadinya Keren Lho sama Kayak di blog saya,, yang dulu , ,tapi sekarang enggak,, mau tau gk efek hover itu apa ?? Nih Saya Kasih tau

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.
Nah ITu Tadi Yang Disebut Efek Hover ,, oke langsung aja yuk tutorialnya Cekidot.

Macam Macam Efek Hover Keren Pada Gambar Di Blog

Berikut Efek Hover Transparan (CSS Image Opacity)

NB :Arahkan Mouse Anda Ke Gambar tersebut Dan Hasilnya Akan Ada efek Opacity

Code CSS :

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

Efek Hover Berputar ( 360 degree rotate image )

Code CSS :

.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 

Code CSS :

.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 ZOOM

Code CSS :

.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

Code CSS :

.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 MOVING

Code CSS :

.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 Border Transform

Code CSS :

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

Cara Memasang Efek Hover Pada Gambar

Gunakanlah Mozilla Firefox Terbaru Dan Google Chrome Untuk Memaksimalkan Efek Efek Tersebut ,,

1. Login Di Blogger
2. Pindah Ke Template
3. Edit HTML > CTRL + F
4. Cari Kode ]]></b:skin>
5. Copy Kode CSS Diatas Lalu Masukkan Kode Tersebut Diatas Kode ]]></b:skin>
Save Template

1. Efek Gambar Tanpa Link 

<img class="img1" src="URL GAMBAR" /></img>

2. Efek Hover Menggunakan Link

<a  class="img1"   href="http://info-sahabatku.blogspot.com"><img  border="0" src="URL GAMBAR" /></a>

note :

img1 : id kode tersebut
http://alexanderakbar9e.blogspot.com/ : ganti Kode URL Anda Tersebut


Nah Itu Semua Efek CSS Di gambar ,, Namun Ada lagi yang lebih keren ,yaitu dengan animasi besok besok aja ya kalo animasi Mudahkan Tutornya

Demikian Post Macam Macam Efek Hover Keren Pada Gambar Di Blog Hari Ini Semoga Bermanfaat Bagi Kita Semua Wassalamulaikum Wr Wb.
Good Luck