4 Variasi Slide Teks Pada Gambar

Menampilkan Teks Pada Gambar Dengan Slide Efek.
Cara Membuat Gambar Pada Blog Dengan Tampilan Efek Slideshow Description Text.

4 Variasi Slide Teks Pada Gambar - Membuat tampilan gambar di Blog menjadi lebih menarik dan cantik akan dapat memberikan kesan tersendiri bagi pengunjung, terlebih gambar di blog Anda diberikan beberapa variasi seperti ini:




DEMO SHOW

Memanfaatkan 4 sisi pada gambar, sisi atas, sisi bawah, sisi kiri, dan sisi kanan. Kesempatan kali ini SAHABAT BLOGGER 77 akan memberikan trik sederhana cara menampilkan descripsi teks pada gambar dengan 4 variasi seperti ini:

//slide text of left style
.slide-left figcaption {bottom: 0; right: 55%;}
.slide-left:hover figcaption {right: 0;}

//slide text of right style
.slide-right figcaption {bottom: 0; left: 55%;}
.slide-right:hover figcaption {left: 0;}

//slide text of top style
.slide-top figcaption {left: 0; top: 90%;}
.slide-top:hover figcaption {top: 0;}

//slide text of bottom style
.slide-bottom figcaption {left: 0; bottom: 90%;}
.slide-bottom:hover figcaption {bottom: 0;}

Anda bisa membuat beberapa variasi tampilan slide teks, misalnya dari mana awal teks akan Anda tampilkan pada saat gambar di hover.

Berikut Cara menampilkan teks pada Gambar hover
Pada Template - temukan kode ]]></b:skin>
Letakkan CSS berikut ini diatasnya:

//* variation slide text description show with css3
sumber:'http://sahabatblogger77.blogspot.com/'
post on (august 13, 2014)
author: devy indriyani
*/
figure {
  float: left;
  display: block;
  position: relative;
  overflow: hidden;
  margin: -2em 15px 50px auto;
  width:350px;
  height:220px;
  border:2px solid #e06666;}

figure:hover figcaption {opacity: 1;}
figcaption {
  position: absolute;
  background: #111;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  margin:0 auto;}

//slide text of left style
.slide-left figcaption {bottom: 0; right: 55%;}
.slide-left:hover figcaption {right: 0;}

//slide text of right style
.slide-right figcaption {bottom: 0; left: 55%;}
.slide-right:hover figcaption {left: 0;}

//slide text of top style
.slide-top figcaption {left: 0; top: 90%;}
.slide-top:hover figcaption {top: 0;}

//slide text of bottom style
.slide-bottom figcaption {left: 0; bottom: 90%;}
.slide-bottom:hover figcaption {bottom: 0;}

Pada tahapan selanjutnya, letakkan HTML di bawah ini saat Anda membuat postingan baru pada formulir HTML (bukan Compose), namun gunakan 1 variasi slide yang Anda inginkan seperti ini:

<figure class="slide-bottom">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPU6aU6CMiKnzoYyBGgAtSVRYJgl-ARLDKU2x-bZ9qZvAcEqIqmi56GE-ChoigcvFpyHiNn_RnulNlhLVEI7qAumXsBDVL-YTPDQc03UEReggadHf8ivONne7Ka9wIB-fiFyGrlIxO0lY/s1600/sb77-file1.jpg">
      <figcaption>Dari Atas Ke bawah</figcaption>
</figure>

<figure class="slide-top">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWdOPDyrTi587vAAgmdm0EpJgE1UjGuaK1PIAdcnbdmkQKRQZz68o4UqNjQC2Usb4RZbi3PcYA8FBFfqrTSSw3OUD4vKcPFDLnWrAVzYVE3aUJ5PCKX44mpeKz2_mh-wpO1CPjg8pmWc/s400/gambar.jpg">
      <figcaption>Dari Bawah Ke Atas</figcaption>
</figure>

<figure class="slide-left">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51YhUtqLdg1lfukM-xhIUtJiW7LvZwp9JHlQb9Mc7CoA9mMQq5GfI5zQnytte0GR0x0sqIMuk_JK7FERtFsL7BtDjhW2rG_nxxcKfNvtBWwSkj9LZVkGwcUSiIgKqIbXScIKcEmf6iSM/s380/124.jpg">
      <figcaption>Dari Kiri Ke Kanan</figcaption>
</figure>

<figure class="slide-right">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZgRvcybXdg1-hMP0Frvf3jAd3p2Btgs4YG-gyhPpe62veKslmzQFcIR3RpmorBW50yzHVGbxQ7HJeBfXObqJ2FmBLQlZCStKyQYWxMSIN4OqmZJNWVenLuueyqj1pMoSN9qosOO7bNk/s500/bbg.jpg">
      <figcaption>Dari Kanan Ke Kiri</figcaption>
</figure>

Cukup mudah dan praktis bukan.! Dengan pengembangan beberapa variasi efek slide, Anda bisa membuat variasi-variasi yang berbeda atau bahkan yang lebih menarik lagi dari ini, misalnya seperti ini -

➟ Perpindahan Slide Gambar Tanpa Lompatan  ► DEMO SHOW
➟ Katakan Cinta Dengan Tampilan Gambar Efek Rotate  ► DEMO SHOW
➟ Efek Zoom Gambar Mode Slide Teks  ► DEMO SHOW
➟ Membuat Koleksi Gambar Hover Efek Zoom Right  ► DEMO SHOW
➟ Cara Membuat Efek Remote Link Pada Gambar  ► DEMO SHOW

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 4 Variasi Slide Teks Pada 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 >>

http://sahabatblogger77.blogspot.com/2014/08/4-variasi-slide-teks-pada-gambar.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77