6 Macam Jenis Efek Transisi Pada Gambar

MP4U - 6 Macam Jenis Efek Transisi Pada Gambar - selamat pagi sahabat MP4U semuanya .. setelah kemarin membahas / berbagi / memposting tentang Cara Membuat Kata - Kata Bergambar Dengan Software Photoscape pada kesempatan dipagi hari yang cerah ini .. admin mau berbagi soal tutorial blog yang paling mudah / simple dan tentunya sudah tidak asing lagi .. bagi sobat yang udah senior dalam blogging tentunya ini bukanlah hal yang aneh .. tapi buat sahabat yang masih pemula ( junior ) / ( newbie ) seperti saya ini .. tentunya selalu banyak hal yang belum tau dan serba penasaran .. salah satunya mungkin dengan efek - efek gambar ??

tidak dapat dipungkiri menurut saya pribadi sih, saat pertama kali mengenal dan terjun kedunia blogging .. saat berkunjung ke blog - blog senior .. sangat merasa wah gitu :D .. wah disini maksudnya mewakili semua perasaan ( perasaan salut / penasaran / ingin coba / ingin buat sendiri dsb ) .. tapi untuk saat ini sih, sudah tidak asing lagi dan udah gk penasaran lagi .. karena cara buatnya pun sudah tau maka dari itu biar semua tau .. jadi saya buatkan postingan juga .. barang kali ada sobat yang masih baru dalam dunia blog dan lagi nyari - nyari cara membuat efek gambar dengan css .. berarti sobat masuk ketempat yang tepat .. karena dibawah ini akan saya kasih tau cara membuat nya ..

ok next .. untuk mempersingkat waktu .. kita langsung saja keinti pembahasan pagi hari ini .. yaitu 6 Macam Jenis Efek Transisi Pada Gambar .. 6 macam yang saya maksud diantara nya :

1. Efek Bumping
2. Efek Fade Out
3. Efek Fade In
4. Efek Zoom
5. Efek Berputar
6. Efek Skew

untuk mengetahui hasil nya nanti sobat tes saja dengan mengarahkan kursor kebagian masing - masing gambar yang ada dibawah ini .. berikut dengan cara buatnya berupa css nya .. yang dapat sobat copas .. kodenya bisa sobat masukan langsng ke dalam template ( cara ini biar otomatis .. setiap bikin postingan tidak harus memasukan lagi kode css efek gambar lagi .. tinggal memasukan tag img nya saja .. sesuai dengan efek - efek gambar yang sobat sukai ) .. bisa juga kode nya di masukin secara manual ( cara ini setiap kali membuat postingan dan ingin menggunakan efek pada gambar .. maka kode css nya harus dimasukan kedalam postingan juga .. dengan tambahan kode <style> ( diawal css ) dan </style> ( dibawah css ) .. berikut css nya ..

1. Efek Bumping

   .img1 {
   -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;
   }
   
   .img1: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);
   }

   
   Hasilnya Dari Efek Bumping ( klik gambar / arahkan kursor pada gambar )
   
   
   


2. Efek Fade Out

   .img2 {
   -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;
   }
   
   .img2:hover {
   opacity:0.2;
   }
   

   
   Hasilnya Dari Efek Fade Out ( klik gambar / arahkan kursor pada gambar )
   
   
   


3. Efek Fade In

   .img3 {
   -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;
   }
   
   .img3:hover {
   opacity:1;
   }

   
   Hasilnya Dari Efek Fade In ( klik gambar / arahkan kursor pada gambar )
   
   
   


4. Efek Zoom

   .img4 {
   -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;
   }
   
   .img4: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);
   }

   
   Hasilnya Dari Efek Zoom ( klik gambar / arahkan kursor pada gambar )
   
   
   


5. Efek Berputar

   .img5 {
   -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;
   }
   
   .img5:hover {
   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -ms-transform:rotate(360deg);
   -o-transform:rotate(360deg);
   transform:rotate(360deg);
   }

   
   Hasilnya Dari Efek Berputar ( klik gambar / arahkan kursor pada gambar )
   
   
   


6. Efek Skew

   .img6 {
   -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;
   }
   
   .img6:hover {
   -webkit-transform:skew(30deg,20deg);
   -moz-transform:skew(30deg,20deg);
   -ms-transform:skew(30deg,20deg);
   -o-transform:skew(30deg,20deg);
   transform:skew(30deg,20deg);
   }

   
   Hasilnya Dari Efek Skew ( klik gambar / arahkan kursor pada gambar )
   
   
   

untuk cara pemasangan nya .. jika mau otomatis maka sobat copas kode css efek gambar nya .. terserah mau efek yang nomer berapa .. jika semuanya suka .. copas semuanya dan simpan didalam template yang sobat pake .. dan untuk mengetes nya .. tinggal sobat buat postingan dan tambahkan Tag Class kedalam url gambarnya .. contoh nya <img src="http://url-gambar.jpg"/> ( sebelum ) .. maka jadi seperti ini <img class="img1" src="http://url-gambar.jpg"/> ( sesudah ) .. class="img1" ganti dengan kode gambar yang sobat sukai .. dengan kode pada masing - masing efek gambarnya .. misal class="img1" / class="img2" / class="img3" / class="img4" / class="img5" / class="img6" ..

gimana ?? sangat mudah bukan ?? ok next .. perjumpaan kita pada pagi hari ini di cukupkan dulu sampai disini .. semoga berguna / bermanfaat bagi siapa pun juga yang membutuhkan nya .. selamat pagi dan sampai jumpa ..

Tag : #cara, #cara buat, #cara membuat, #cara ngebuat, #cara bikin, #cara membikin, #MP4U, #Tutorial, #Blog, #Blogging, #Tutorial Blog, #Tutorial Blogging, #6 Macam Jenis Efek Transisi Pada Gambar, #Efek Gambar, #Transisi Gambar, #Macam - macam Transisi Gambar, #Jenis - Jenis Efek Gambar