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.
#round img {Anda bisa membuat gambar melengkung seperti gambar diatas, hanya dengan mengganti URL IMAGE yang berwarna merah itu, gamti dengan url gambarmu.
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>
Salam Blogger Donomulyo.
8 komentar
praktekin dulu gan...
nice info
yo'opo carane ben otomatis gan...???
taruh di script setelah img{script CSS}
ex: .post-thumbnail img{aturan image sebelum cursor aktif}
.post:hover .post-thumbnail img { scriptnya disini }
aku pake itu sob. .
:D
gan ap efeknya cuma berlaku untuk tema tertentu saja ya...
CSS ini bisa dimanfaatin disemua template gan .. .
klo pingin otomatis langsung aja taruh di img dibawah body gan. .
gan ane pke template dr blogging secret..nah ane kan udh masukin tuh kode di atas di bawah body pas nulis postingan tetep ga ada efeknya....pas ane ke edit html template ane masukin k yang pengaturan css imageny tetep ga jadi..ane masukin ke .post tetep ga jadi...nah musti di apain gan ane penasaran bgt ma tuh efek..mohon bantuannya gan...tp nih gan ya ane pke kode css yg efekny klo disorot gambarny jd gede anehnya jadi...
oh ya gan itu yang div id="round"
URL IMAGE /div bener ap ga??cuz klo formaatny ky gt yg muncul bukan gambar tp url gambarnya...klo agan nempatin kodenya kaya gimna biar kaya yg dicontoh...
klo untuk zoom image scriptnya beda ama ini gan..
untuk otomatis di image silahkan pake script ini. .
Taruh di bawah ]]>
.post-body img {
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%;
box-shadow: 0px 0px 15px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Terimakasih atas komentar Anda.
Budayakan Bertanya dan Berkomentar dengan Sopan.
Tolong tinggalkan komentar jika Anda menemukan Link yang Broken.
EmoticonEmoticon