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://info-sahabatku.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

Macam Macam Efek Hover Keren Pada Gambar Di Blog

Alternative Link : [ Click Here ... ]

Posted by Ramadhan Ashary | Published at 13.14

36 komentar :

  1. PERTAMAXX Sob ,, Keren Nih efek Efek nya ,, Makasih ya Mas Infonya :)

    BalasHapus
  2. Saya baru tahu nie,We makasih Mas lengkap deh caranya. Ijin Bookmark sapa tau saya mau nyoba praktek. Makasih...........

    By Aji-Apps

    BalasHapus
    Balasan
    1. Iya ,, kalo Bookmark silahkan sob dengan senang hati

      Hapus
  3. Mantap ni sob, ane simpan dulu deh tutorialnya

    BalasHapus
  4. keren sob,ternyata ng berat2 amat skripnya ya

    comeback

    BalasHapus
  5. keren gan mau pake 1 nih tahnks

    comeback

    BalasHapus
  6. wuihh keren keren nih sob efek hover nya ijin nyobak ya :D

    BalasHapus
  7. Wuss keren ni post izn coba yang efek border

    BalasHapus
  8. efeknya jg berlaku pada banner gk?

    BalasHapus
    Balasan
    1. Semua Gambar Bisa Ini Sob, Cuma Tambahin Aja Kode di atas itu

      Hapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. wah makasih ilmunya. saya terapin dlu deh ke blog saya hehe

    BalasHapus
  11. itu bisa di pake di widget ga gan

    BalasHapus
  12. wah mau saya coba pasang nie tutorial nya si manga saya

    terima kasih ae mas .. . .

    BalasHapus
  13. Jd pingin tester juga nih... kang ;)

    BalasHapus
  14. keren gan .. efek'' nya bagus'' banget ^_^

    BalasHapus
  15. widih keren banget gan ijin nyoba

    BalasHapus
  16. Luar binasa gan..
    izin terapkan di blog...!!!

    BalasHapus
  17. wah rame bener ya blog ini... komen back ya

    BalasHapus
  18. Mantaabbb KUnjungi Juga http://fery-antojawa.blogspot.com

    BalasHapus
  19. Wah patut dicoba ini tutorialnya, ini ilmu baru bagi saya ijin coba ia sob, dan salam kenal dari saya, kalau ada waktu luat sempatkanlan singgal di lapak saya "Karya Kuring Haratis"

    semangat blogger indonesia..

    BalasHapus
  20. Nice post! comment back! http://diverzer.blogspot.com/2013/11/cara-upload-css-di-google-sites.html

    BalasHapus
  21. Keren gan efeknya :)

    comment back ya http://www.ziantshady.net/2014/02/mengganti-warna-teks-saat-di-block-ala-ziant-shady.html

    BalasHapus

{ Harap Baca }

1. Harap berkomentar dengan bahasa indonesia yang baku tanpa singkatan.
2. Apabila Anda Komentar Thank's Info ,, Nice Post <-- Akan saya Hapus
3. Dilarang Live Link
4. Dilarang Berkomentar berbau Por** and SARA
5. Berkomentar lah Dengan Sesuai Postingan Diatas
6. Jika Anda Mengomentar Enggak Sesuai Topik Gunakan OOT

{+} Ingat Jangan Sekali Sekali Menaruh Link Hidup Maupun Link Mati

 
 
Copyright © 2014 Blog Mas Rama Template Design By | Pathmo