Go! Blog

cara buat efek hover pada gambar header blog

Sore bos, pada sore ini gue mau share cara buat efek hover pada gambar header blog
contohnya bisa sobat tes di blog ini,arahkan mouse sobat ke gambar di header bloh ini..
nah gimana,keren gag?? 
pengen bikin juga??
kalo pengen nih caranya :
  • Login ke blogger
  • Pilih menu template >> edit HTML >> lanjutkan
  • Cari Kode ]]></b:skin> Lalu letakkan code di bawah ini tepat diatasnya...
a.thumbopacity img {  -moz-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    -webkit-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;margin-top:5px;margin-left:230px; position:absolute; }
a.thumbopacity:hover img{  margin-left: 175px;  padding-left: 0px;  }

  • Sesuaikan letak Gambar kalian dengan mengedit marginnya 
  • Lalu copy code di bawah ini dan pastekan tepat dibawah code </head> 
<a class='thumbopacity'>
<img border='0' src='URL gambar sobat'/></a> 
  • Ubah kode yg berwarna kuning dengan URL gambar kalian 
  • Setelah itu simpan HTML kalian dan lihat hasilnya. 
Demikian cara buat efek hover pada gambar header blog
SELAMAT MENCOBA :)

    0 komentar:

    Diberdayakan oleh Blogger.