20.4.15
21
Scale And Rotate Effect
2 Efek Berbeda Dalam 1 Tampilan Gambar - Selain widget-widget keren yang Anda sisipkan untuk membuat tampilan blog semakin cantik, menampilkan gambar dalam postingan juga dapat membuat pembaca betah berlama-lama di blog Anda. Karena dengan adanya gambar dalam sebuah informasi artikel, akan menjelaskan apa tujuan dan alur cerita yang tertulis dalam postingan tersebut, namun untuk menarik perhatian mereka, Anda harus membuat gambar tersebut dengan tampilan yang berbeda. Seperti gambar di postingan dengan Efek Zoom Gambar Mode Slide Teks misalnya, saat pengunjung asyik membaca tulisan Anda, dan pada saat itu pula efek dalam gambar itu memberikan kesan takjub saat panah mouse mereka menyentuh gambar itu.


Image hover effect



Pertemuan kali ini, seperti biasa saya akan berikan 2 model efek yang berbeda, namun efek itu bisa terjadi dalam 1 tampilan gambar. Scale effect merupakan pergerakan transisi suatu objek menjadi membesar dalam satu batas area, sedangkan Rotate effect adalah gerakan berputar saat cursor mouse berada diatasnya.
Contoh efek » Katakan Cinta Dengan Tampilan Gambar Efek Rotate

Semua itu hanyalah sebuah pilihan, mana yang menurut Anda menarik untuk dipasang di post Anda. Sekarang kita tinggalkan cerita model-model efek diatas, karena saatnya meramu 2 efek berbeda diatas untuk digabungkan dalam 1 tampilan gambar dengan resep kode CSS seperti ini:



<style type="text/css">
/* Scale And Rotate Effect In Hover Image
Data: Pure CSS input
Visit: http://sahabatblogger77.blogspot.com/
Released Publish on April 20, 2015
Design Author: Devy Indriyani */
.scaleRot {
  position:relative;display:inline-block;overflow:hidden;width:300px;height:200px;
  margin:10px;cursor:pointer;border:4px solid #fff;box-shadow:0 0 3px #777}

.scaleRot span {
  background:rgba(0,0,0,.42);position: absolute;color:yellow;
  font:bold italic 10px Verdana,sans-serif;padding:180px 0 0 10px;z-index: 1;
  width:300px;height:200px;display: block;top: 0;transition: all 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;-moz-transition: all 1.5s ease-in-out}

.scaleRot img {
  width:100%;height:100%;-webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;transition: all 1.5s ease-in-out}

.scaleRot:hover img {
  -moz-transform: scale(1.2) rotate(10deg);
  -webkit-transform: scale(1.2) rotate(10deg);
  transform: scale(1.2) rotate(10deg)}

.scaleRot:hover span {
  opacity:0;transition: .01s linear;-moz-transition: .01s linear;
  -webkit-transition: .01s linear;-webkit-transition: .01s ease-out;
  -moz-transition: .01s ease-out;transition: .01s ease-out}
</style>

Dan hasilnya :




DEMO SHOW




SELESAI..!! tinggal menaruh URL gambar pada HTML seperti ini, namun ganti terlebih dahulu teks kode yang saya beri warna MERAH dengan gambar posting Anda, dan beri title gambar tersebut dengan mengganti tulisan pada teks warna ORANGE seperti ini:


<div class="scaleRot">
   <img alt="SB-77 Design" src="http://URL-Gambar.jpg" />
      <span>SB-77 Design</span>
</div>



Mudah, simple dan menarik. Saya yakin setelah ini pengunjung yang bertamu di blog Anda akan bermain-main dengan gambar itu, sehingga akan terfokus untuk tertarik membaca semua pesan dalam tulisan posting Anda.
Selamat Berkreasi guys..!! dan mimpi yang indah ya, bay....!!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 2 Efek Berbeda Dalam 1 Tampilan Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

21 komentar

  1. weeeh ,,, bkin makin memanjakan mata pengunjung nih ,,,ehheh
    betul betul betul ? :)

    BalasHapus
    Balasan
    1. upin ipin ayo makan, ada ayam goreng neh..!!

      Hapus
    2. asik ada ayam gireeng ,,, boleh sy minta ,,,hehe

      Hapus
    3. Aq juga mau dong ayam gurihhhh nya.... hehehe

      Hapus
  2. eh itu kode css nya di taroh mana yah ,,,hehehe

    BalasHapus
    Balasan
    1. ada 2 pilihan mas, mau diletakkan secara langsung dalam formulir posting HTML atau dalam wilayah ]]></b:skin> pada Template.
      jika dala Template, hapus tag pembuka <style type="text/css"> dan tag penutup </style>

      Hapus
    2. sy cubi dulu yah ,,,hehe

      Hapus
  3. Bagus mbak , gambarnya bisa di bolak balik tapi bingung mau di pasang di mn

    BalasHapus
    Balasan
    1. Letakkan dalam formulir kosong lembar posting, seperti gambar berikut, lihat ada tool disebelah kiri ada mode tulis COMPOSE dan HTML. (klik yang HTML)

      http://1.bp.blogspot.com/--sKdzHly_Sg/VTZkaoHX7kI/AAAAAAAAB3w/_3KQ3COblR8/s1600/formulir%2BHTML.jpg

      Hapus
    2. Mbak punya kodenya Widget buat top comentator

      Hapus
  4. keren efek hovernya, tapi mbak coba gambar yg kedua pada demo hovernya beda dari arah gambar yang pertama. pasti lebih keren lagi :d

    BalasHapus
  5. Lagii-lagi Pure CSS...keyen

    BalasHapus
  6. si teteh memang keren2 idenya. dan caranya. (h)

    BalasHapus
  7. menarik dua efek berbeda yang keren

    BalasHapus
  8. Bagus nih, ada dua efek Images zoom dan muter... Kalau ada posting yang pas, nanti langsung saya terapkan kembali... Thanks mba devy :)

    BalasHapus
  9. keren sobat kapan-kapan tak comot source codenya buat gambar author blog saya. biar makin menarik kesannya x-)

    BalasHapus
  10. Uh, pengen bisa, tapi kadang ribet mbak ya, trus kalau gak berhasil, bawaannya sudah gak mood aja, hihihi..tapi terimakasih lho sharingnya..:)

    BalasHapus
  11. Malah sepertinya itu 3 efek deh. Efek layer (hover), zoom dan rotate. Kalo gak salah sih... Hehehe... :d

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK