Info

SELAMAT DATANG

Selamat datang di Coretan Yanz Calvin - saya senang Anda berada di sini, dan berharap Anda sering Mengunjungi Blog Ini Lagi. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel dunia teknik (Blogging, Tutorial, Download, Trik" handphone Dan Lain Lain) Anda mungkin akan menemukan sesuatu yang menarik

Sekilas Tentang YANZ CALVIN

Nama saya YANZ CALVIN, Saya Bukan Seorang Ilmu Pengetahuan, Desainer atau Blogging Tapi Saya Hanya Seseorang Pemula Belajar Dunia Internet Dan Ingin Belajar ..

TRANSLATE TO

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
Blog Newb1e

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 :)

0 komentar:

Posting Komentar

KomentarImage Silahkan Isi Komentar Anda Sesuka Hati Anda Google/Blogger Untuk Anda yang memiliki Akun Google/Blogger.

Silakan Isi KOmentar Dengan Baik Dan Bijak