Kumpulan Ragam Efek Pada Gambar

Kumpulan Ragam Efek Pada Gambar - Menyisipkan gambar pada sebuah artikel sangatlah penting, karena dengan adanya gambar pada artikel akan sedikit memperjelas tujuan dan makna dari artikel tersebut, tetapi tidak banyak yang melakukan modifikasi pada gambar artikelnya sehingga artikel yang terkesan fresh terlihat mati karena gambarnya tidak memberi kesan kepada pembaca, tetapi jangan memuat gambar 18+ (gambar HOT) ya, ntar tidak nyambung dengan konten, hehe..

Kali ini, SAHABAT BLOGGER 77 sudah menyiapkan beberapa kode CSS yang dapat anda kelola sendiri nantinya, untuk menciptakan efek baru pada gambar dengan style anda. Jika sebelumnya saya sudah pernah share Efek Remote Link Pada Gambar, kali ini saya akan berikan Kumpulan Ragam Efek Pada Gambar yang dapat anda pilih untuk mempercantik tampilan gambar pada artikel anda nantinya.

*/
.imagecss3 .hover {-webkit-transition:all .5s ease-out;transition:all .5s ease-out;transform:translate(0px,-10px);tranparent transparent #ce35aF transparent;border:solid transparent whitecrome;}
design by.http://sahabatblogger77.blogspot.com/script_jscss3
author:devyindriyani
.image {no margin,no padding,no float}
.demoimage .hover {id=class;opacity:0.2;1;all}
/*

Kode diatas jangan di copy ya! karena tidak akan menghasilkan apa-apa, saya hanya menggunakan kode CSS diatas untuk memberi efek dengan berbagai ragam pada gambar dibawah ini.

EFEK BUMPING

.demo1 {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
.demo1:hover {-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px);}

EFEK FADE OUT

.demo2 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;}
.demo2:hover {opacity:0.2;}

EFEK FADE IN

.demo3 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;opacity:0.2;}
.demo3:hover {opacity:1;}

EFEK ROTASI

.demo4 {-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.demo4:hover {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}

EFEK POINTER ZOOM

.demo5 {-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.demo5:hover {-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-ms-transform:scale(2,2);-o-transform:scale(2,2);transform:scale(2,2);}

EFEK FOTO CSS3

img.foto {background-color:#ffffff;border:0px;outline:none;padding:5px 5px 20px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);box-shadow:0 1px 3px rgba(0,0,0,0.7);}
img.foto:hover {-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}

EFEK CLEAR IMAGE

.efect {...}
.efect .hover {...}

Bagaimana? sudah menemukan ragam efek untuk gambar yang sesuai dihati anda? Tetapi pada efek foto CSS3 gambarnya jangan diambil ya, itu sudah ada yang punya, kalau kodenya silahkan dicopy bebas dan gratis, hehe.!

Saatnya menerapkan Kumpulan Ragam Efek Pada Gambar diatas pada blog

1. Anda boleh taruh kode pilihan anda pada HTML template, letakkan diatas atau sebelum kode ]]></b:skin>, namun jika takut edit kode templatenya, cukup tambahkan kode :
 <style design [[csstype="http://sahabatblogger77.blogspot.com"]]>KODE DISINI</style> 
2. Kode-kode diatas sudah saya permudah susunannya menggunakan artribut ID(class="atribut gambar")dari angka 1,2 dan seterusnya, pada postingan cukup tambahkan kode class="kode atribut pilihan anda" mode HTML (bukan Compose)
   contoh misal pilihan anda efek bumping, maka kodenya akan seperti ini
   
   <style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
   .demo1 {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
   .demo1:hover {-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px);}
   </style>
   <div class="separator" style="clear: both; text-align: center;">
   <img class="demo1" src="URL gambar anda.jpg" /></div>
3. Pada efek terakhir (efect clear image) value-nya masih kosong, silahkan anda tambahkan jika ada kode efek baru dari anda, saling berbagi kan pahalanya besar sob, saya tunggu kodenya dikolom komentar ya, hehe.!!
4. Dan tidak lupa saya ucapkan terimakasih, semoga Kumpulan Ragam Efek Pada Gambar ini dapat bermanfaat. I Miss U guys.! emmm...muachh,,daaaaa...!!