Membuat Beberapa Gambar Berefek Image Hover Dengan Css

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

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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

.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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

.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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

.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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

.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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

 .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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

.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/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />

Silahakan Berkreasi, edit sesuka hati anda :)