Efek Slidding Pada Gambar Postingan

Efek Slidding Pada Gambar Postingan - Gambar atau Foto merupakan sebuah kenangan, oleh karenanya banyak yang membuat tulisan atau sekedar kata-kata dibalik gambar, berawal dari gambar ini tercetus ide bagaimana menampilkan tulisan tersebut saat kita berada pada halaman depan gambar, seperti saat kita sedang melihat gambar/foto, pasti akan membalikkan foto itu untuk melihat tulisan yang ada dibaliknya, nah..istilah inilah yang disebut efek SLIDDING.

Slidding merupakan efek pergantian pada halaman depan ke halaman setelahnya atau halaman kedua, jika pada foto tepatnya seperti ALBUM FOTO. Tidak jauh berbeda dengan postingan saya sebelumnya tentang Membuat According Efek Pada Gambar, yang mana saya menumpuk gambar layaknya sebuah album, dan gambar tersebut dapat kita lihat satu persatu dengan pointer KLIK. Nah kali ini saya akan menampilkan tulisan-tulisan pada gambar menggunakan slidding efek dengan balutan CSS Code Image Box Wrapper

Persiapkan dahulu gambar anda dengan balutan kode seperti ini

<div class="image-box-wrapper" id="image-box-wrapper">
<!-- `.image-box` start -->
<div class="image-box">
<div class="image-container">
<img alt="Devy Indriyani" src="URL-gambar.jpg"/></div>

*//..kode berikut untuk memotong tulisan dibalik gambar
<div class="image-details">
<div class="details">
<h4>SAHABAT BLOGGER 77</h4>
<a class="more" href="URL-Anda" target="_blank">Teks Anda</a></div>
</div>
</div>
<!-- `.image-box` end -->
<div class="clear">
</div>
</div>

Maka hasilnya akan tampak seperti gambar berikut

Coba letakkan kursor anda pada gambar diatas, Slidding Efek pada gambar tidak merespon, pada tahap ini kita butuh CSS code untuk memanggil efeknya

.image-box-wrapper {
  width:642px;
  margin:50px auto;}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;}

.image-container,
.image-details {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  -webkit-transition:margin-top .4s ease-out .4s;
  -moz-transition:margin-top .4s ease-out .4s;
  -ms-transition:margin-top .4s ease-out .4s;
  -o-transition:margin-top .4s ease-out .4s;
  transition:margin-top .4s ease-out .4s;}

.image-container img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;}

.image-details h4 {
  font-size:120%;
  height:auto;
  text-align:center;}

.image-details .details {
  padding:10px 12px;
  overflow:hidden;}

.image-details .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;}

.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}

KETERANGAN KODE

1. Dibawah kode <div class="image-container"> silahkan ganti dengan URL gambar anda
2. Kode <h4>SAHABAT BLOGGER 77</h4> merupakan tulisan yang ada dibalik gambar, silahkan ganti sesuai selera anda
3. Jika ingin menyertakan beberapa link pada tulisan, anda tinggal ganti kode yang saya beri warna Merah, namun jika tidak hapus saja

Penerapan Ke- Blog

1. Kode CSS sudah pasti meletakkan pada HTML Template, silahkan buka Template anda,lalu Klik icon EDIT HTML, Copy CSS lalu Paste diatas atau sebelum  ]]</b:skin> 
2. Namun jika anda lagi tidak ingin utak-atik HTML Template (Dikarenakan takut terjadi error), kita lakukan pada postingan
3. Tambahkan kode berikut <style .CSSfile {sahabatblogger77.blogspot.com;}> sebagai tag pembungkus diawal kode CSS, dan akhiri dengan tag penutup </style> diakhir kode CSS
4. Jika ingin menerapkan pada postingan, copy semua kodenya pada mode HTML bukan Compose, namun jangan lupa untuk menambahkan kode pada poin ke-3

Jika sudah OK, maka hasilnya akan seperti gambar berikut ini

SAHABAT BLOGGER 77

Follow My Blog

NICE BLOG SHARE
Tutorial Blog | CSS & HTML Code | Template Design | Blogging Tips | SEO Information

Kode diperbaharui pada Wednesday April,09 2014