CaRa MemBuaT GamBaR BerPuTaR

Nih Codenya...

 <style type="text/css">.kodokloncat{float:center; margin:0px; autowidth:0px; autoheight:0px; autoborder:none; overflow:hidden}.details{width:200px; height:300px; background:#000; color:#fff; text-align:center} #kodok-3{position:relative;}#kodok-3 img{opacity:1-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details:hover{opacity: .9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}</style><div class="kodokloncat" id="kodok-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismOxL2HUd8uzCif0YDSl_K9h0Uf3rjglRmEMhhIqDX9eOuLUg301IHJYgfDL2XH5CBERRtcK-cQdCRgKoTpdLURQGUR8OQAAhdJSo8Cbnt7bi3xeIwjlf2lCMk9fBhINma-15fvyk5xE/s400/037.jpg" /><div class="details"><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAR8kbpv_kxojjVpFDaV1bughA3kwDR09VmU3Z7hzm_No6PVoBTbAOUEfRebBR5gZzNg5FTzfKSCteEdO0nSmWV16cB_R-ijhu6bJ93_ybQKJnfb87pZpxYanwpKt8xlPG1v50NvKlJQ/s400/063.jpg" width="400" /></div></div>

Nih Codenya...


 <style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismOxL2HUd8uzCif0YDSl_K9h0Uf3rjglRmEMhhIqDX9eOuLUg301IHJYgfDL2XH5CBERRtcK-cQdCRgKoTpdLURQGUR8OQAAhdJSo8Cbnt7bi3xeIwjlf2lCMk9fBhINma-15fvyk5xE/s400/037.jpg)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>

Nih Codenya...


 <style type="text/css"> #waktu_demo{margin:0 auto;border:0px #aaa solid;padding:10px;}.amdhas_box {width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismOxL2HUd8uzCif0YDSl_K9h0Uf3rjglRmEMhhIqDX9eOuLUg301IHJYgfDL2XH5CBERRtcK-cQdCRgKoTpdLURQGUR8OQAAhdJSo8Cbnt7bi3xeIwjlf2lCMk9fBhINma-15fvyk5xE/s400/037.jpg)}#ease.amdhas_box { -webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid; }#waktu_demo:hover .amdhas_box, #waktu_demo.hover_effect .amdhas_box{margin-left:440px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";filter: alpha(opacity=6);-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg); transform: rotate(360deg);background-color:#fff;</style><div id="waktu_demo"><div class="amdhas_box" id="ease"><div class="center"></div></div></div>


ini adalah kode yang saya buat semalaman sampe pusing karena saya ingin sekali gambar ini berjalan dan terpecah juga ketika kembali gambar ini berputar tetapi sayangnya efek yang sempurna hanya di safari dan chrome.

• 
• 
• 
• 
• 
• 
•