Cara Memberi Efek Hover Pada Gambar Di Header

Posted by : Unknown Sabtu, 11 Januari 2014

XPS-PRO kali ini akan share cara Memberi Efek Hover pada Gambar yang ada di Header. untuk demonya silahkan klik demo di bawah ini, lalu coba kamu sorot gambar yang ada di header.

>>> DEMO <<<

Berikut Tutorialnya :
---------------------
1.Login ke blogger

2.Pilih menu template >> edit HTML >> lanjutkan

3.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; }

4.Sesuaikan letak Gambar kalian dengan mengedit marginnya.

5.Lalu copy code di bawah ini dan pastekan tepat dibawah code </head>

<a class='thumbopacity'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRGkz0UoveyH5OX5JJ_8wyUGdrq9ebK9q7PLggPWM1SLY4rTSMRrX_uN-XJESycDNJ3uT5A0i_rSPpSnXjNc-NsxZvGMsGrgByvtYy1dLgVQUZlH7neuxDj54azvzTe13PTgzEcvn8kTXG/s1600/adada.png'/></a>