Membuat Beberapa Gambar Berefek Image Hover Dengan CSS --- Assalamualaikum, Kali ini saya akan membagikan efek-efek gambar dengan CSS, yang saya maksud ialah image hover, apa itu hover?, dalam bahasa inggris hover artinya dekat (translate) hehe, maklum english saya yes-no :) hover = dekat , mungkin maksudnya dalam css adalah saat kursor mouse didekatkan/diarahkan ke gambar, gambar tersebut akan menampilkan efek-efek tertentu yang telah diberikan, itu menurut saya,  dari pada pusing dengan penjelasan saya mendingan gak usah diperpanjang lagi penjelasannya kita langsung saja lihat salah satu contohnya di bawah ini :


Membuat Beberapa Gambar Berefek Hover Sederhana sbb :
1. Masuk dulu ke akun blogger anda

2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin>
5. Copy kode di bawah lalu paste di atas kode ]]></b:skin>
.rezdown71 {
border:1px solid #fff;
  }
.rezdown71:hover {
border:1px solid red;
  }
6. Save Template dan buat sebuah postingan baru
7. Untuk pemanggilan kode CSS tersebut harus di buat kode HTML yang berfungsi untuk memanggil, contoh kodenya seperti ini :

<img class="rezdown71" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png">
Ket.

  • Kode yang berwarna Biru berfungsi untuk pemanggilan jadi kode Biru tersebut harus sama dengan kode Biru pada CSS di atas (anda bisa mengubanya dengan kata2 anda sendiri, rezdown71 saya gunakan agar gampang saya ingat).
  • Kode yang berwarna Hijau adalah URL/Alamat gambar, ganti dengan alamat gambar anda.

Untuk menjadikan gambar tersebut link kodenya seperti ini :

<a href="LINK ANDA DI SINI" target="_blank"><img class="rezdown71" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" /></a>
8. Save Postingan jika telah selesai

Berikut contoh beberapa Image hover sederhana beserta kode CSS dan HTML


.rezdown72 {
  border:1px solid #ccc;
  }
.rezdown72:hover {
  background-color:#ccc;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
  }

<img class="rezdown72" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />



.rezdown73 {
border:1px solid red;
  }
.rezdown73:hover { 
-moz-box-shadow: 5px 5px 10px red;
  }

<img class="rezdown73" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />



.rezdown74 {
border:1px solid #ccc;
  }
.rezdown74:hover {
background-color:#eee;
border:1px solid red;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
  }

<img class="rezdown74" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />



.rezdown75 {
border:2px solid #ccc;
  }
.rezdown75:hover {
border:2px dashed #000;
  }
<img class="rezdown75" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />


.rezdown76 {
  padding-top:5px;
  padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
  }
.rezdown76:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }
<img class="rezdown76" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />


 .rezdown77{
border:5px solid #ccc;
  }
.rezdown77:hover {
  background-color:#E71305;
border:5px solid #ddd;
  }
img class="rezdown77" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />

.rezdown78 {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
margin: 0 10px 5px 0;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}


.rezdown78:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 10px red;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow:0px 0px 10px red;
opacity: 1;
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
<img class="rezdown78" src="https://lh4.googleusercontent.com/_TRImnBCKAy4/TaQHrabqdRI/AAAAAAAABgw/37-FqxJosVs/bannerrrrrrr.png" />

Silahakan Berkreasi dan edit sesuka hati anda :)

55 komentar :

  1. keren nih tutornya sob...thanks dh sharing ya..

    BalasHapus
  2. Saya tertarik sama yang paling bawah, terasa indah sob.

    BalasHapus
  3. Wow keren!
    Sekalian bongkar2,kusedot ilmunya ya sob,biar blogku tambah ganteng.Makasih sob!

    BalasHapus
  4. Adrian :
    okey sobat,sama2 :)
    -------------------------
    wawasan sosial politik :
    terima kasih sobat
    -------------------------
    Bagus (Kebarongan) :
    hehe,,saya jug sih sebenarx lebih suka yg itu
    -------------------------
    Er'end :
    thanks sobat :)
    silahkan,,mudh2n blogx tambh ganteng n baxk cewk yg naksir :)

    BalasHapus
  5. Nice info dan sangat lengkap dan jelas... keinginan sih ada.. namun rasa malas ini yang menghalangi untuk berkreasi :) Peace

    BalasHapus
  6. Wah efeknya keren nih kawan, apalagi yang paling bawah itu, thanks dah berbagi ilmu, sukses trus, okey :D

    BalasHapus
  7. wh keren nih

    CTRL+D yah mas

    BalasHapus
  8. Zona Indonesia :
    Terimakasih sobat,yah begitulah sob :D
    --------------------
    All About Anime :
    Makasi Sobat :),kok semua suka yg pling bawah yah...hehe
    --------------------
    rheinful :
    Silahkan sobat,,makasi sebelumnya :)

    BalasHapus
  9. Saya disini terus sob dari tadi.
    Jangan ganggu aku yach,aku lag konsen nieh,hehehe!

    BalasHapus
  10. @Er'end hehehe pantesan dri tadi blog saya berat,,ternyata ada org yang nongkrong dri tadi di sini :D

    BalasHapus
  11. wahh sudah lama rasanya gak main kesini...
    apa kabar sob???

    BalasHapus
  12. Sebuah ilmu yang jarang dimiliki orang ini gan.
    Bagus dan ampuh tutornya.

    BalasHapus
  13. @Kurtnia Lama juga Gk Ke Blog sobat
    ane menuju nkTKP nih.. :)
    baik2 aja sob :D
    @Obat Sakit 2011 Haha Slah Sobat,,Ilmu ini Bdaxk banget Yang tau :D
    thaks :)

    BalasHapus
  14. Bagus sangat saya suka ini biar ga bisa2 tapi belaja2 lagi dan lagi ku kan kembali lagi....

    BalasHapus
  15. mantab sob.. saya ctrl + D yang ini :)

    ntr dicoba,, skrg mw tidur dulu.. haha

    BalasHapus
  16. @Adhie Okey sob silahkan,,hehe :D

    BalasHapus
  17. ane hanya menangkap ilmu... hehehe, thx buat artikelnya bro..

    BalasHapus
  18. h€llo..good afternoon..happy b£ogging time and enjo¥ to “smile” it

    BalasHapus
  19. tipsnya sangat menarik...sukses semuanya....apakah awardnya sudah Anda ambil...silahkan diambil gan

    BalasHapus
  20. selamat malm sob, ada info ni blog rezdown7 milik sobat dapat award dari blog Bisnis Online PTC mohon diterima ya.

    BalasHapus
  21. mantaf info'a sob... thanks ya

    BalasHapus
  22. amazon's best review :
    Menuju TKP
    --------------------------
    media update :
    makasi sobat,,amin...
    Menuju TKP Sob.at :)
    -------------------------
    Wahyu arief :
    Wah coba cek lagi sobat...
    bkisa kok n nih jalan dibklog saya :)
    -------------------------
    Bisnis Online PTC :
    Wah Dapat lagi nih..
    thanks yah sob,,menuju TKP nih....
    -------------------------
    adibey :
    okey sob.,,sama2 :D

    BalasHapus
  23. Wah keren tutorialnya sob, seperti yang sudah saya terapkan di blog saya, menggabungkan tutorial trik-trik hover mouse dalam satu posting, benar-benar brilian

    BalasHapus
  24. oya satu lagi sobat, sekalian saya mau minta pencerahan gimana cara membuat kalimat seperti di pojok kanan bawah kotak komentar blog rezdown, yang tulisannya "nama komentar + terimakasih telah berkomentar", itu caranya gimana sob ?

    BalasHapus
  25. hai.

    jalan-jalan sore..

    BalasHapus
  26. trims gan tutornya
    aku belum faham
    harus aku pelajari lagi ini gan

    BalasHapus
  27. Hello. I wish you a nice Friday, super weekend. Keep smile and come again. http://fotisbazakas.blogspot.com

    BalasHapus
  28. izoel :
    makasi sanjunganxx sob
    betul2 sob,,hehe
    -------------------------
    saka :
    Silahkan sob :D
    -------------------------
    napstereveiro :
    okey makasi sobat :)
    -------------------------
    Obat Sakit 2011 :
    sama2 soba,,
    bisa aja becandax :D
    -------------------------
    ΦΩΤΗΣ ΜΠΑΖΑΚΑΣ :
    thans n menuju TKP nih.. :)

    BalasHapus
  29. wow keren efeknya, kalau kita buat automatis bisa gk ya?? gk payah taruk kode satu persatu? :)

    oya follow back ya :)

    BalasHapus
  30. @Daris Gooner Bisa Sob,,Tpi Gk Kayak Gini Kodex,,pux kode sendiri klo yg otomatis..

    oke menuju TKP nih..

    BalasHapus
  31. My smile for you. Visiting again , have a nice day, super weekend! Hugs Fotis. http://fotisbazakas.blogspot.com

    BalasHapus
  32. wah efek gambarnya keren bgt nih, thanks

    BalasHapus
  33. ambil award,follow me,kalau mau beramal bantu situs adik2 rohis dgn fllow http://www.rohis10.co.cc/

    BalasHapus
  34. Blogging With Me :
    sama2 sobat :D
    ----------------------
    Berry Hardisakha :
    menuju TKP nih sob :)

    BalasHapus
  35. MARI KITA MENJALIN SILATURHAMI PARA BLOGGER, BLOG KAREN SOB, SALAM KENAL, KALO MAU TUKERAN LINK MAMPIR KE BLOG SAYA TERIM KASIH

    BalasHapus
  36. masih lum ngerti saya gan....

    BalasHapus
  37. ini yg aku cari2 sob,
    langsung ke TKP sob,,,,
    thanks yah..^_^

    mampir k4 ane juga yah
    http://isalgames.blogspot.com/
    ^_^

    BalasHapus
  38. mulyanto :
    Maeri SOb,,hehe
    thanks
    ---------------------
    Pulsa Mojokerto :
    Apax gan??
    gampng kok,,alx ini tinggal masang doang css n HTMLx
    --------------------
    ISAL :
    Benar kah sob,,hehe
    silahkan n sama2 sob
    ane juga menuju TKP :D

    BalasHapus
  39. Mau coba kawan. Mudah-mudahan berhasil.

    BalasHapus
  40. masih lum ngerti saya gan....

    BalasHapus
  41. is Bandar Soccer largest Online SBOBET that has its own market, the best market in asia pokerstars | Judi online

    BalasHapus

Dimohon Untuk Tidak Melakukan KOMENTAR SPAM!!
- Memasukkan Link Aktif
- Promo/Iklan
- Komentar Tidak Sesuai Postingan
- Posting Berualang-Ulang