CSS Cara Membuat Efek Melengkung pada Image

CSS Cara Membuat Efek Melengkung Pada Image - Melanjutkan Tutorial CSS sebelumnya, pagi ini kita akan mencoba membuat efek melengkung pada image ketika disorot atau didekati oleh Cursor. Kode CSS yang kita terapkan adalah dengan memanfaatkan Radius. Dengan script Radius kita bisa membuat sudut melengkung baik pada button maupun pada image.

CSS Cara Membuat Efek Melengkung Pada Image kita mencobanya dengan memanfaatkan fasilitas hover juga sehingga image akan melengkung ketika disorot oleh cursor.

Anda bisa melihat Demo diatas untuk CSS Cara Membuat Efek Melengkung Image.

#round img {
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#round img:hover {
border-radius: 0% 50%;
box-shadow: 0px 0px 15px #fff;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
<div id="round">
URL IMAGE</div>

 Anda bisa membuat gambar melengkung seperti gambar diatas, hanya dengan mengganti URL IMAGE yang berwarna merah itu, gamti dengan url gambarmu.

Salam Blogger Donomulyo.