2 Efek Berbeda Dalam 1 Tampilan Gambar

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.

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....!!!