XtGem Forum catalog
Welcome To WapBlog ( GT )

Generator Text


Aplikasi
Cara Buat
DP BBM 23
Fakta Dan Kisah Nyata
Film
FB ( Full Bokeep )
Gadis 69
Hot News
Tips
Tutorial Blogging
Tutorial Wap
Xtgem

Welcome

Text Generator at WapBlog Ocha Rocker

Thank you for taking the time to visit and read articles that are here , if this was helpful please share it with your friends as well .. Okay !!!


Info WapBlog !!!
WapBlog Generator Text Review by : Ocha Pratama
Free All Information at Xtgem Inc
rating : 99% / 100
Kumpulan Berita Terbaru | Serba - Serbi | Tips & Trik | Generator Text | Tutorial Blogging | Wap & Blog

Best Regars >> ☆☆ WapBlog ☆☆

Ocha Rocker

» » 7 Model Efek Hover Sederhana Pada Gambar Tapi Keren

7 Model Efek Hover Sederhana Pada Gambar Tapi Keren

Cara Buat, Tutorial Blogging, Tutorial Wap, Xtgem | 01:14 | Sab, 13 Agustus

Assalamu'Alaikum WR.WB


7 Model Efek Hover Sederhana Pada Gambar Tapi Keren


Selamat dini hari buat semua nya .. yang mungkin / kebetulan nyasar ke mari .. pada kesempatan malam hari ini .. akan sedikit mengulas dan berbagi cara buat ..
7 Model Efek Hover Sederhana Pada Gambar Tapi Keren
.. mungkin agak sedikit aneh ya .. dengan judul nya .. sederhana tapi keren ?? .. bukan aneh sih .. tapi terlalu ribet aja buat judul nya .. lebih tepat nya bingung juga ngasih judul nya .. tapi its ok lah brow .. dari pada bingung - bingung .. mendingan langsung saja ke intinya .. hehehe ..

Ok next .. cara ini untuk di terapkan pada blog blogspot .. namun tahukah anda ?? Bahwa di xtgem juga dapat kita gunakan / terapkan .. dan di xtgem juga .. kita dapat memasang pernak - pernik / widget - widget keren layak nya sebuah blog pada blogspot ..

Sperti yang sudah kita ketahui bersama .. bahwa Wap Xtgem .. sebuah wap builder .. yang keseluruhan nya kita sendiri yang memodif dan membuat nya .. dari "0" s/d Finish .. dan dari sinilah kita dapat berkreasi sekreatif mungkin .. dengan memahami berbagai kode .. dari mulai yang terkecil / mudah sampe yang di anggap rumit ..

Menurut saya pribadi .. bisa di katakan .. sperti layak nya kita membangun sebuah rumah sendirian .. dari mulai ngumpulin bahan .. merancang / membuat kerangka dsb .. sampe akhirnya rumah impian pun jadi .. sperti apa yang kita inginkan .. termasuk segala isi nya .. dan disini pun sama .. walau sekali pun belum mahir soal codding / ngedit - ngedit Kode .. tapi kita sudah bisa membangun wap sekeren mungkin .. untuk kita jadikan blog .. berikutnya tinggal menuangkan menu - menu skreatif / sebagus / semenarik mungkin .. untuk di suguhkan kepada tamu yang berkunjung ke blog kita ..

Untuk menu .. itu soal takhir .. pertama - tama .. yang harus kita buat agar si tamu yang berkunjung merasa betah .. dengan tampilan blog kita .. yaitu persiapan bagaimana cara nya untuk memepercantik blog kita .. dengan desain yang lebih menawan .. dan untuk anda yang masih pemula seprti saya .. yang baru mengenal Wapsite apa lagi ingin di desain untuk di jadikan blog yang sekeren mungkin .. bukanlah hal yang mudah tapi bukan juga hal sulit .. karena kita dapat mempelajari nya sedikit demi sedikit .. dan semua itu bisa kita pelajari seutuhnya dengan memperbanyak belajar .. hehehe .. itu sudah tentu ..

Nah maka dari itu .. kita langsung saja mulai belajar .. pembelajaran kita kali ini .. membuat efek hover pada gambar .. namun sebelum melanjutkan .. perlu di garis bawahi .. bahwa saya pun disini masih belajar .. jika ada salah - salah kata mohon di maklum .. karena kita disini sama saling belajar dan mengajarkan .. ok baiklah .. kita lanjut .. untuk mempercantik wap layak nya blog .. sperti blog - blog luaran sana .. tidaklah serumit dengan yang di bayangkan .. jika sudah tau dan bisa caranya sangatlah mudah .. dan salah satunya ini .. yang kita bahas ..

Dan sebenarnya banyak cara untuk memperindah / mempercantik .. tampilan gambar yang kita upload .. dengan gaya / efek yang berbeda - beda .. dari setiap sentuhan nya .. namun kita bahas 7 gaya / efek dulu .. biar tidak terlalu banyak dan tidak terlalu pusing untuk di ingat .. dan perlu diketahui .. Selain pada seluruh gambar yang terdapat dalam posting .. efek gambar juga dapat diterapkan pada salah satu gambar yang kita inginkan saja ..

Baik satu gambar dalam posting .. widget .. ataupun template .. Banyak sekali berbagai efek gambar yang dapat diterapkan .. namun saya hanya akan memberikan beberapa diantaranya saja khususnya efek jenis hover .. untuk contohnya dari pembahasan kita kali ini .. silahkan lihat ke 7 gambar di bawah ini .. tapi jangan cuma di lihat .. karena gak akan ada perubahan apa - apa :D .. tapi coba satu - satu gambar nya di klik / usap .. dan bandingkan dari masing - masing gambar tersebut .. di mana perbedaan nya .. jika salah satu dari ke 7 itu .. ada yang menurut mu keren .. silahkan copas kode css nya .. dan coba terapkan sendiri pada blog / wap xtgem mu ..

1. Efek Hover Terang - Redup




2. Efek Hover Redup - Terang




3. Efek Hover Berputar




4 Efek Hover Berputar & Membesar ( Zoom )




5. Efek Hover Membesar ( Zoom )




6. Efek Hover Transformasi




7. Efek Hover Berpindah ( Moving )




Gimana ?? Dari ketujuh gambar tersebut .. dapatkah anda membedakan nya ?? .. dimana efek hover dari masing - masing gambar tersebut ?? .. & menurut mu mana yang lebih bagus ??? .. jika dirasa bagus semua dan ingin di coba dari kesemua nya .. silahkan lanjutkan membaca .. di bawah ini tutor singkat untuk kita terapkan di blog ..

Cara Pemasangan


  • Jika kita menerapkan efek pada gambar .. yang terdapat dalam template .. letakan kode CSS-nya pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin>
  • Jika kita menerapkan efek pada gambar yang terdapat dalam posting .. kita bisa letakan kode CSS-nya sebelum memasukan kode HTML gambar ketika membuat posting dalam mode HTML .. Atau bisa juga pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin>
  • Jika kita menerapkan efek pada gambar yang terdapat dalam widget .. kita bisa letakan kode CSS-nya sebelum memasukan kode HTML .. Atau bisa juga pada bagian Edit HTML template .. tepatnya di atas kode ]]></b:skin>
  • Jika kita meletakan kode CSS-nya .. di atas kode ]]></b:skin> yang terdapat dalam HTML template .. kita tidak perlu menyertakan kode <style> ...... <style/>


Gimana ?? Dari sedikit penjelasan diatas dapat di fahami ?? Atau masih terasa pusing & bingung ?? .. jika iya silahkan di baca kembali .. jika di rasa masih saja tidak mengerti .. boleh bertanya lewat komentar .. dan dibawah ini .. kode css dan HTML nya .. silahkan copas semua .. atau salah satunya aja .. yang menurut mu bagus .. jika penjelasan diatas sudah di fahami .. dengan mengklik tombol Copas Code HTML & CSS .. kalau belum faham .. abaikan saja dulu kode nya ..

×

7 Model Efek Hover Sederhana Pada Gambar Tapi Keren

Copas Css Dibawah Ini :

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

.img2 {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.img2:hover {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}
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:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.img4 {
-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;
}
.img4: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);
}
.img5 {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.img5: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);
}
.img6 {
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;
}
.img6: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;
}
.img7 {
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);
}
.img7: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);
}
</style>

Copas Code HTML DIbawah Ini :

<img class="ID img1 s/d img7" src="URL GAMBAR"/>

Keterangan : : yang berwarna Blue ganti dengan ID Gambar .. misal img1 .. sampai dengan img7 .. dan yang berwarna Lime .. ganti dengan URL GAMBAR Anda .. yang mau di beri efek hover ..


Keterangan :


  • Kode berwarna biru adalah kode yang tidak perlu disertakan jika meletakan kode CSS di atas kode ]]></b:skin> yang terdapat dalam HTML template ..
  • Kode berwarna merah adalah nama id yang bisa sobat ubah sesuai keinginan ..
  • Silakan terapkan efek gambar ini dengan meletakan kode CSS .. dengan cara yang telah dijelaskan di bagian atas pada posting ini ..
  • Selanjutnya, letakan kode HTML seperti berikut ini .. di posisi yang akan digunakan untuk meletakan gambar .. seperti posting, widget, atau template .. <img class="img1 s/d img7" src="URL GAMBAR"/>
  • Ubah kode berwarna merah dengan nama id yang digunakan ..
  • Ubah kode berwarna Biru Muda dengan url sebuah gambar ..


Nah itulah tadi .. soal cara buat efek hover gambar .. sangat mudah banget kan ?? .. dan hasilnya pun sangat bagus .. jika anda minat dan tertarik dengan efek - efek nya ...silahkan copas dan pelajari lagi sendiri .. jika masih ada kurang faham nya .. dan cukup sampe disini pembelajaran kita kali ini .. soal 7 Model Efek Hover Sederhana Pada Gambar Tapi Keren yang dapat saya bagikan .. kurang lebihnya .. mohon dimaklum aja .. dan semoga bermanfaat .. #Happy_Blogging ^_^ ..

Judul : 7 Model Efek Hover Sederhana Pada Gambar Tapi Keren

Author : Ocha Rocker

Created at : 2016-08-18 11:20:52

Rating : 99% / 100

View : 17133x dibaca




Label



On : 1 / Hari ini : 3 / Minggu ini : 3 / Bulan ini : 175 / 17133


Share On :

Design : WapBlog GT