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

Slidding Pada Gambar Postingan

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

Devy Indriyani

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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Slidding Pada Gambar Postingan
Ditulis oleh= Devy Indriyani
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 =

17 komentar

  1. articel nya sangat bermanfaat dan sangat membantu saya kak salam sukses

    BalasHapus
    Balasan
    1. alhamdulillah kalau bermanfaat mah,hehe.sukses selalu juga

      Hapus
  2. wah, keren banget..lebih hemat tempat ya? ^^

    BalasHapus
    Balasan
    1. betul mas,sedikit menghemat ruang postingan

      Hapus
  3. keren mbak
    dicobain boleh gak?
    hehe

    BalasHapus
    Balasan
    1. silahkan di coba mas,tetapi gambarnya diganti ya,jangan pakai foto saya,hehe

      Hapus
  4. perlu di coba nih... thx sharingnya yia bos......

    BalasHapus
  5. Keren banget nih, kalo yang ini wajib dicoba. makasih sob triknya :)

    BalasHapus
  6. Saya lebih suka berlama-lama liat fotonya aja... x-)

    #SambitPot

    BalasHapus
    Balasan
    1. bikin betah liat photonya ya bro : wkw (p)

      Hapus
  7. langsung menuju ke template, coabin scripnya sahabatblogger
    :D thanks mbak Devy

    BalasHapus
  8. mantebb mbak infonya..
    detail dan mudah benget..
    cocok buat yang mau buat efek slidding tanpa ribet ya mbak

    BalasHapus
  9. bener2 hebat nih mbk Devy, 5 jempol buat mbk Devy. terima kasih tutorialnya..

    BalasHapus
  10. Post yang menarik :D Thx

    BalasHapus
  11. Sampe dibuat nyengir kagum ni,.... bisa'an si onyon hahaha....

    BalasHapus
  12. tengkyu Vy..
    efek slidingnya..
    ternyata mengacak-acak kode terbilang susah..

    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