Membuat Beberapa Gambar Berefek Image Hover Dengan CSS

Assalamualaikum..

Kali ini saya akan membagikan efek-efek gambar dengan CSS, yang tentunya image hover, apa itu hover?? wah... saya juga kurang tau penjelasannya, namun dalam bahasa inggris hover artinya dekat (translate) hehe, maklum english saya yes-no :D. lanjuttttt... oy hover = dekat , mungkin maksudnya dalam css adalah saat kursor mouse didekatkan/diarahkan ke gambar, gambar tersebut akan menampilkan efek-efek tertentu yang telah di berikan (menurut saya :p)

Yaudah dari pada anda pusing dengan penjelasan saya mendingan gak usah di perpanjang lagi penjelasannya deh, kita langsung aja lihat salah satu contohnya di bawah ini :

Untuk membuat yang seperti ini caranya gini....

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>

.Tutorial_TIK-PTD_1 {
border:1px solid #fff;
  }
.Tutorial_TIk-PTD_1: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="Tutorial_TIK-PTD_1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/">

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="Tutorial TIK-PTD1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" /></a>

8. Save Postingan jika telah selesai

Berikut contoh beberapa Image hover sederhana beserta kode CSS dan HTML

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

<img class="Tutorial_TIK-PTD_2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

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

<img class="Tutorial_TIK-PTD_3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

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

<img class="Tutorial_TIK-PTD_4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

.Tutorial_TIK-PTD_5 {
border:2px solid #ccc;
  }
.Tutorial_TIK-PTD_5:hover {
border:2px dashed #000;
  }

<img class="Tutorial_TIK-PTD_5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

.Tutorial_TIK-PTD_6 {
  padding-top:5px;
  padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
  }
.Tutorial_TIK-PTD_6:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

<img class="Tutorial_TIK-PTD_6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

 .Tutorial_TIK-PTD_7{
border:5px solid #ccc;
  }
.Tutorial_TIK-PTD_7:hover {
  background-color:#E71305;
border:5px solid #ddd;
  }

img class="Tutorial_TIK-PTD_7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

.Tutorial_TIK-PTD_8 {
-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);
}


.Tutorial_TIK-PTD_8: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="Tutorial_TIK-PTD_8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1EJLCP01vHiGXG46nAvfoRvpqP0MS9_z3XH6oys2pcyXH2MR7az7v_uXOuAN9Epdv3xcx4H-aWCie5be8LtZOWIqaQ3tnG8HgiNKuraE0U73ZMnJVlQ53OmoWedTAdAtJpVAkNKXMWKp/" />

Silahakan Berkreasi, edit sesuka hati anda :)


Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Mudah2n Apa Yang Saya Bagikan Bisa Bermanfaat Buat Sahabat
Terima Kasih.

Posted in: Blog