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
7. Untuk pemanggilan kode CSS tersebut harus di buat kode HTML yang berfungsi untuk memanggil, contoh kodenya seperti ini :
Untuk menjadikan gambar tersebut link kodenya seperti ini :
Berikut contoh beberapa Image hover sederhana beserta kode CSS dan HTML
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
(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>
6. Save Template dan buat sebuah postingan baru.rezdown71 {
border:1px solid #fff;
}
.rezdown71:hover {
border:1px solid red;
}
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" />
Langganan:
Posting Komentar
(
Atom
)
keren nih tutornya sob...thanks dh sharing ya..
BalasHapusmantab kawan artikelnya
BalasHapusSaya tertarik sama yang paling bawah, terasa indah sob.
BalasHapusWow keren!
BalasHapusSekalian bongkar2,kusedot ilmunya ya sob,biar blogku tambah ganteng.Makasih sob!
Adrian :
BalasHapusokey 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 :)
Nice info dan sangat lengkap dan jelas... keinginan sih ada.. namun rasa malas ini yang menghalangi untuk berkreasi :) Peace
BalasHapusWah efeknya keren nih kawan, apalagi yang paling bawah itu, thanks dah berbagi ilmu, sukses trus, okey :D
BalasHapuswh keren nih
BalasHapusCTRL+D yah mas
Zona Indonesia :
BalasHapusTerimakasih sobat,yah begitulah sob :D
--------------------
All About Anime :
Makasi Sobat :),kok semua suka yg pling bawah yah...hehe
--------------------
rheinful :
Silahkan sobat,,makasi sebelumnya :)
Saya disini terus sob dari tadi.
BalasHapusJangan ganggu aku yach,aku lag konsen nieh,hehehe!
@Er'end hehehe pantesan dri tadi blog saya berat,,ternyata ada org yang nongkrong dri tadi di sini :D
BalasHapuswahh sudah lama rasanya gak main kesini...
BalasHapusapa kabar sob???
Sebuah ilmu yang jarang dimiliki orang ini gan.
BalasHapusBagus dan ampuh tutornya.
@Kurtnia Lama juga Gk Ke Blog sobat
BalasHapusane menuju nkTKP nih.. :)
baik2 aja sob :D
@Obat Sakit 2011 Haha Slah Sobat,,Ilmu ini Bdaxk banget Yang tau :D
thaks :)
Bagus sangat saya suka ini biar ga bisa2 tapi belaja2 lagi dan lagi ku kan kembali lagi....
BalasHapus@Anisayuhehe Semangat mba' :)
BalasHapusmantab sob.. saya ctrl + D yang ini :)
BalasHapusntr dicoba,, skrg mw tidur dulu.. haha
@Adhie Okey sob silahkan,,hehe :D
BalasHapusane hanya menangkap ilmu... hehehe, thx buat artikelnya bro..
BalasHapus@Indrazz Afterlife okey sob,hehe,sama2 :)
BalasHapusdicoba dolo ah
BalasHapus@ipad case Silahkan Sobat :)
BalasHapush€llo..good afternoon..happy b£ogging time and enjo¥ to “smile” it
BalasHapustipsnya sangat menarik...sukses semuanya....apakah awardnya sudah Anda ambil...silahkan diambil gan
BalasHapuskok g bisa rezdown78 nya
BalasHapusselamat malm sob, ada info ni blog rezdown7 milik sobat dapat award dari blog Bisnis Online PTC mohon diterima ya.
BalasHapusmantaf info'a sob... thanks ya
BalasHapusamazon's best review :
BalasHapusMenuju 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
saya suka sob ..... :)
BalasHapus@Dadang Herdiana thanks sobat krn sudh suka :D
BalasHapusWah keren tutorialnya sob, seperti yang sudah saya terapkan di blog saya, menggabungkan tutorial trik-trik hover mouse dalam satu posting, benar-benar brilian
BalasHapusoya 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 ?
BalasHapushai.
BalasHapusjalan-jalan sore..
nice sob :)
BalasHapustrims gan tutornya
BalasHapusaku belum faham
harus aku pelajari lagi ini gan
izoel :
BalasHapusmakasi 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.. :)
wow keren efeknya, kalau kita buat automatis bisa gk ya?? gk payah taruk kode satu persatu? :)
BalasHapusoya follow back ya :)
@Daris Gooner Bisa Sob,,Tpi Gk Kayak Gini Kodex,,pux kode sendiri klo yg otomatis..
BalasHapusoke menuju TKP nih..
@ΦΩΤΗΣ ΜΠΑΖΑΚΑΣ Menuju TKP Gan :D
BalasHapus@ΦΩΤΗΣ ΜΠΑΖΑΚΑΣ Menuju TKP Gan :D
BalasHapuswah efek gambarnya keren bgt nih, thanks
BalasHapusBlogging With Me :
BalasHapussama2 sobat :D
----------------------
Berry Hardisakha :
menuju TKP nih sob :)
MARI KITA MENJALIN SILATURHAMI PARA BLOGGER, BLOG KAREN SOB, SALAM KENAL, KALO MAU TUKERAN LINK MAMPIR KE BLOG SAYA TERIM KASIH
BalasHapusmasih lum ngerti saya gan....
BalasHapusini yg aku cari2 sob,
BalasHapuslangsung ke TKP sob,,,,
thanks yah..^_^
mampir k4 ane juga yah
http://isalgames.blogspot.com/
^_^
mulyanto :
BalasHapusMaeri 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
Mau coba kawan. Mudah-mudahan berhasil.
BalasHapus@Bagus Sugiarto Okey Silahkan Sob :)
BalasHapuswah.. menarik nih sob!!
BalasHapus@Candra Aditya Iya Sob...thanks :)
BalasHapusmasih lum ngerti saya gan....
BalasHapus