Menampilkan Teks Pada Gambar Dengan Slide Efek Style1

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:

Dari Atas Ke bawah

Dari Bawah Ke Atas

Dari Kiri Ke Kanan

Dari Kanan Ke Kiri

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/AVvXsEhV5IXITxZmo3QAsAcypwvVInJla6q3hOQ-3f8za3MGrtWa3UzqdjxIkyAUJNDEDc4Q5jSrB6sOUNOtH83x13jPqOffkOIBYbAObCtMnAI1J2F0QDJUWEF975ufowYX_kbuRUNqDNtBJxo/s1600/sb77-file1.jpg">
      <figcaption>Dari Atas Ke bawah</figcaption>
</figure>
<figure class="slide-top">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_G8Bcdl0QG9w6QXcS_xwDYhiPIZ5VbxC-1NVQ5UmNR96slTlUgbJL6dzMZPAGvk87E8QzHRZrO9ZEnz48d2r2sCUKU8Rvjdp_t9Vn01Ym1hR_3M_Ocf6Q5oqejaKmLmYuYbe9X-pSyI/s400/gambar.jpg">
      <figcaption>Dari Bawah Ke Atas</figcaption>
</figure>
<figure class="slide-left">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDbWyJSP9qVTIXqUDVR05x6mkSL1N3EJbmWE1BbTDalkc3b9gpMMrMVYnhBKp4E4M3TpMultDVQGXQbS4u_zX48nhWOvJWEurMDaD9AkMgEHTB1ENI1H32vJndwb5g_IxdZCuGkcv5zo/s380/124.jpg">
      <figcaption>Dari Kiri Ke Kanan</figcaption>
</figure>
<figure class="slide-right">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUW19oaMKh5f-ghqea2eW72kiREi-h91b3LT5uZNTDoBFaQtKTl1Hdtg40ZR2jVI9MM_-CuqOJzwHPWutKRNAhgjsa46SgKFcw31t-vLVCTeuO5Lj3_GjZTRyiW56FEE4433aU3Rl7tJE/s500/bbg.jpg">
      <figcaption>Dari Kanan Ke Kiri</figcaption>
</figure>

Sumber: sahabatblogger77