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



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!

Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • Berlangganan via Email

    '