Efek Image Rounded Saat Mouse Hover

Heloo sobat ketemu lagi sama saya Kuntoro Tirto Madani kali ini saya mau share Tips Blog .. yaitu Cara Membuat Efek Image Rounded Untuk demonya anda bisa lihat di blog saya sendiri .. cranya arahkan cursor ke image posting blog saya ... nanti akan muncul efek fotonya jadi Bundar kan ???
Ok dari pada penasaaran cara bikinnnya , mending langsung aja yah...


1.Buka Template ..

2.Cari Kode </head> , Agar Lebih Cepat Tekan CTRL + F

3. Pastekan Kode dibawah ini diatas Kode </head>

<!-- kondisi home -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post-body {
    padding: 0 0 10px 0;
}
.post img {
width: 100px;
height:100px;
background: transparent;
border: 3px Groove #8aff00;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post img:hover {
border: 3px Groove #8aff00;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
</style>
</b:if>
</b:if>
    <!-- /kondisi home -->

4.Klik Pritanjau dulu kalau ada yang gagal ..

5.Jika sudah aman baru Klik Simpan Template ...


Sekian Tutorial dari saya ,, Semoga Bermanfaat ,, Terima Kasih ..

Sumber : 
http://www.kuntoro-cyber.com/

Related Post: