Image Enlarger with Animation for Image post using CSS3

Image enlarger yang hanya menggunakan CSS3 ini dikhususkan untuk posting yang melibatkan penggunaan gambar. Gambar hanya akan ditampilkan dalam ukuran kecil (thumbnail) dengan lebar (width) dan tinggi (height) sebesar masing-masing 110px. Dengan menyentuhkan cursor pada thumbnail, maka gambar akan menjadi bertambah besar dengan ukuran lebar (width) sebesar 400px sedang tingginya menyesuaikan dengan gambar yang diposting. Dengan menggunakan metode seperti ini diharapkan halaman posting menjadi lebih rapi dan lebih mampu memuat teks tanpa mengurangi kemampuannya dalam menampilkan gambar berukuran besar.

Untuk meciptakan desain halaman posting yang tetap terjaga, dimana perbesaran gambar tidak mempengaruhi tatanan posting, desain telah disesuaikan dengan menggunakan kode CSS untuk membuat teks atau gambar lain tetap diposisi semula saat cursor menyentuh gambar (thumnail) dan proses perbesaran gambar terjadi. Position absolute dan penambahan DIV dalam bentuk float left membuat semua ini mungkin terjadi.

Untuk meletakkan gambar baru (ke-2, ke-3 dst), cukup batasi dengan menggunakan tag p dalam bentuk :

<p> <div class="leftGRie"></div><img class="GRie" src="Image-2.jpg /> Text here! </p> kemudian untuk gambar lain lakukan hal yang sama.

Supaya lebih jelas apa yang dimaksud di atas, silahkan sampeyan lihat DEMO-nya melalui link di bawah ini.

D E M O

Kode CSS Image Enlarger for post

img.GRie  {
      position: absolute;
      cursor: pointer;
      display: block;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border: 3px solid #555;
      padding: 4px;
      background: #000;
      margin: 0 10px 5px 0px;
      opacity: 0.6;
      height: 110px;
      width: 110px;
      -o-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
      -moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
      -webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s;
      }
img.GRie:hover {
      -o-transition:  width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
      -moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
      -webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s;
      opacity: 1.0;
      z-index: 9;
      border: 10px solid #fff;
      width: 400px;
      height: auto;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      background: #aaa;
      box-shadow: 1px 1px 10px #000;
      -moz-box-shadow: 1px 1px 10px #000;
      -webkit-box-shadow: 1px 1px 10px #000;
      }
.leftGRie {
      float:left;
      width: 135px; 
      height: 130px; 
      }


]]></b:skin>

<!--[if IE]>
<style type="text/css">
img.GRie { filter: alpha(opacity=60);}
img.GRie:hover { height: auto; width: 400px; filter: alpha(opacity=100); border: 10px solid #ddd; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=10);}
</style>
<![endif]-->

Kode CSS tersebut silahkan di simpan di template dengan cara

• Login to Blogger (login ke Blogger).
  • Tulis User Name (Nama Pengguna) atau Email Address.
  • Tuliskan Password (Sandi).
  • KLIK "Login".
• Dasboard (Dasbor). Halaman dashboard akan dijumpai beberapa saat setelah login di lakukan.
  • Cari link "Design (Rancangan)".
  • KLIK "Design (Rancangan)".
• Page Elemens (Elemen Laman) : Sesampai di halaman ini KLIK link "Edit HTML".
• Edit HTML :
  • Cari Kode ]]></b:skin>
  • Letakkan KODE CSS di atas dan di bawah ]]></b:skin> seperti yang terlihat di atas.
  • Kode CSS yang di bawah ]]></b:skin> digunakan supaya desain bisa bekerja di Internet Explorer (IE) mekipun animasi CSS3 tidak dapat bekerja karena IE belum support.
• KLIK "SAVE Template (Simpan Template)".

Cara Mnggunakan Kode HTML untuk Posting">Gunakan kode berikut untuk contoh posting menggunakan fungsi Image Enlarger:

<div class="leftGRie"></div><img class="GRie" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87ttEsPwiv01Hwy-o6oayN2petKK57oOA1BaNcCC3lihFsx_GZsJ81rT6eAYQGyguwa4cIClLryczIoB5FfzTsYUX1VAxH0WuVMt82GV7hcFcP_Vvgav-XnRJ1DpMzJBoqALYflt1GqZh/s400/026_aguna.jpg" />September-2010. Sentuhkan cursor pada gambar disamping! Dengan menggunakan posting gambar seperti disamping, maka kita tidak perlu menampilkan gambar dalam ukuran bear yang terlalu banyak menyita halaman posting. Cukup tampilkan dalam bentuk seperti ini, maka gambar bisa dilihat dalam ukuran besar hanya dengan membawa cursor di atas gambar. <p>Menampilkan posting yang disertai gambar dalam bentuk seperti ini tentunya akan membuat blog bertambah menarik. Jangan kuwatir tentang penggunaan kode. menambah fungsi seperti ini sangat mudah karena hanya perlu menggunakan beberapa kode CSS sebagai pembangun fungsi, serta beberapa kode HTML untuk posting. Sangat simple dan mudah dilakukan siapapun, bahkan pemula sekalipun.</p><p><div class="leftGRie"></div><a href="http://img.theomegaproject.org/thumbs/2010/05/176.jpg" target="_blank"><img class="GRie" src="http://img.theomegaproject.org/thumbs/2010/05/176.jpg" /></a>
Bagaimana tentang ukuran gambar yang digunakan? Hooo .... Ini sangat praktis karena seberapapun besar gambar yang digunakan, maka gambar akan ditampilkan dalam ukuran lebar 400px (width), sedang tinggi (height) akan menyesuaikan dengan gambar (image) aslinya.</p>
<p>Mungkinkah ukuran gambar diperbesar atau diperkecil? <p>Anda dapat melakukannya dengan merubah kode CSS yang berkaitan dengan width untuk disesuaikan dengan lebar halaman posting. Ukuran 400px disini hanya dilakukan dengan pertimbangan banyak blogger yang menggunakan halaman posting dengan ukuran berkisar 400px. Bila anda menggunakan halaman yang lebih besar, silahkan untuk sedikit melakukan perubahan width pada syntax di kode CSSnya.</p>

Contoh di atas mempunyai bentuk dasar kode sebagai berikut :

<div class="leftGRie"></div><img class="GRie" src="image-1.jpg" /> Tuliskan teks di sini! 
<p><div class="leftGRie"></div><a href="link-image-2"><img class="GRie" src="image-2.jpg" /> </a>Tuliskan teks di sini! </p>
<p><div class="leftGRie"></div><a href="link-image-3"><img class="GRie" src="image-3.jpg" /> </a>Tuliskan teks di sini! </p>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «