Menampilkan Teks Pada Gambar Dengan Slide Efek.
Cara Membuat Gambar Pada Blog Dengan Tampilan Efek Slideshow Description Text.
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:
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:
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:
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 -
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;}
.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/AVvXsEhyyx_v1QdXhdJIYL4bxo-Yjihbpd64Llea0t2J5WOBnDoXMTAWz4vw9Ek9Ra2TzvRQ3okzmvsFmIJfA12nZrqdXwJUXjNyYROGkZQw7_tMhwqIndIfuo6j4KDKZswm0rMQzb_CwgPIgvQ/s1600/sb77-file1.jpg">
<figcaption>Dari Atas Ke bawah</figcaption>
</figure>
<figure class="slide-top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20e5s1-YdAq5jYbasWVPlQ7D8PE6S_LZdhGIedcUmi5eErU2I-Yy5QFssjmrsX5Yp9iI9M0QpGs44owYfO5KGZs1PjEA0gH29i9jHmVd_z8tOXVwfT98tGT3yJgJ_GreV6h1G-DTvRvo/s400/gambar.jpg">
<figcaption>Dari Bawah Ke Atas</figcaption>
</figure>
<figure class="slide-left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNMh1Zx_MapGBgzFMfNSowbcmV_guVeMFd6ntFRiTt3njY7axBkmiBSeY-mQoRDgqlVZpjrZjBMT-o8SgsRXvVoZf3OeOHoRIdTuUHae9v1oQP9ANjgCW1d-o5YdLc7PCyBcusTvOB6t0/s380/124.jpg">
<figcaption>Dari Kiri Ke Kanan</figcaption>
</figure>
<figure class="slide-right">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimx6WjOGNhPh8vPw0CQoDg1-gFIkQRtC5rGhgsNvLfAQMDkIiN1q3Pw2Gp-1FJpNqvTbFOwkTctnTeoQUGpEDUmiLHHaV9qDO-Hsw5mTl4OoW00GjBLGeFAleT3eTuBag8Xb3ezO1OgTM/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
