Efek Zoom Gambar Mode Slide Teks

Efek Zoom Gambar Mode Slide Teks - Tampilan efek zoom pada gambar sudah sering kita temukan diberbagai tutorial, namun jika kita klarifikasi efek zoom pada gambar sering sekali digunakan oleh para pembuat Template dengan memberikan mode slide teks pada popular post dengan efek tumbanail gambar, karena dengan adanya Efek Zoom Gambar Mode Slide Teks pada widget popular post atau related post akan lebih menarik minat pembaca untuk melihat artikel terpopular pada blog tersebut, sehingga akan banyak terjadi lalu lintas kunjungan pada blog tersebut.

Seperti pentingnya dalam memilih JUDUL yang berkualitas pada artikel, pemilihan jenis nice gambar juga tidak kalah penting, karena gambar pada sebuah artikel akan menerangkan rangkuman tujuan tulisan tersebut mengarah pada hal apa, artikel tersebut sedang membahas apa, semua itu sudah dapat terbaca dengan adanya gambar.

Tanpa menghilangkan atau mengubah efek zoom yang sama, efek gambar kali ini SAHABAT BLOGGER 77 akan memberikan efek zoom gambar terbaru dengan tampilan downslide descripsi teks seperti pada gambar berikut

Baca juga Cara - Menghemat Ruang Posting Dengan Sembunyikan Teks


Berikut CSS pembangun efek zoom gambar dengan menampilkan descripsi teks style downslide (hover). Letakkan CSS berikut sebelum atau diatas kode ]]></b:skin>

/*
CSS element for Image Property with downslide decs text
Design by: Devy Indriyani
Website: http://sahabatblogger77.blogspot.com/
Indext data: CSS-type <[[45-Ca.n67447-9nbgTF]]>
*/
.sahabatblogger77 {
  position: relative;
  z-index: 1;
  font-family: verdana;
  font-size: 13px;}

.sahabatblogger77 img {
  position: relative;
  z-index: 2;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;}

.sahabatblogger77:hover img {
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-transform: scale(1.05, 1.05);
  -webkit-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);}

.sahabatblogger77 div.desc {
  position: absolute;
  width: 120%;
  z-index: 1;
  bottom: 0;
  left: 5px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  border-bottom:2px solid orange;
  color: white;
  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  opacity: 0;
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  -moz-transition: all 0.5s ease 0.5s;
  -webkit-transition: all 0.5s ease 0.5s;
  -o-transition: all 0.5s ease 0.5s;
  -ms-transition: all 0.5s ease 0.5s;
  transition: all 0.5s ease 0.5s;}

.sahabatblogger77 div.desc a {color: white;}
.sahabatblogger77:hover div.desc {
  -moz-transform: translate(0, 100%);
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transform: translate(0, 100%);
  opacity: 1;}

.sahabatblogger77 div.rightslide {
  width: 150px;
  top: 15px;
  right: 0;left: auto;
  bottom: auto;
  padding-left: 15px;
  -moz-border-radius: 0 8px 8px 0;
  -webkit-border-radius: 0 8px 8px 0;
  border-radius: 0 8px 8px 0;}

.sahabatblogger77:hover div.rightslide {
  -moz-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transform: translate(100%, 0);}

DEMO SHOW


Jika hanya sekedar untuk tampilan pada gambar postingan, letakkan HTML berikut saat akan menulis artikel pada mode HTML, bukan yang Compose

<div class="sahabatblogger77">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vNoHKJI1H0AvVu13l90JdfnxLgicXV5eiXiyoEP12fsE1Xb6aiyPrjtbHk5WzS9xMdI-smeBySvknAzhrhz_aBR-jiQjXehP1DybOFmjkeYHQt2WD7o41fnh-kls8zg-XcJDNUm4U8Y/s1600/3.jpg" />
   <div class="desc downslide">
    ....
    Tulis Teks Anda Disini
    ....
   </div>
</div>

Terimakasih dan semoga tutorial ini dapat meng-inspirasi sahabat semua dalam menemukan ide kreatif lainnya. Success for you