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

downslide teks image


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="http://1.bp.blogspot.com/-t29PniG1SIs/U2E4nMdXBzI/AAAAAAAAAUA/o70Qzu7cZZA/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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Zoom Gambar Mode Slide Teks
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 =

18 komentar

  1. pagi sista keren ini sist gambarnya bisa zoom ini kira-kira ini bisa gak dijadikan untuk gamabr artikel biar jadi zoom gitu sis.

    BalasHapus
    Balasan
    1. bisa sist, letakkan kode HTML pada saat akan memuat artikel baru mode tulis HTML,

      Hapus
    2. ayo jeng..arisannya dah mw dikocok nih..!

      Hapus
    3. hahaha..gambarnya ikut jg lengket di ats gambar admin..salah tempat, klw liat efek ini Mba ane jd berhayal, bisa tidak efek diputar..?

      misal gambarnya sebagai footer blog sedang tulisan yg keluar dari balik gambar tsb. dijadikan form komentr, menjadi "efek slide form komentar footer", ,, maksi Ya Adm C****k, ..! ats tutornya, mw blik dulu..!

      Hapus
    4. hanya efeknya saja yang diubah mas,menjadi efek animasi rotasi, namun kalau belum begitu paham lain waktu akan saya share tutornya.

      saya siapkan dulu kodenya ya mas,mohon sabar menunggu,,hheee

      Hapus
  2. Wah info bagus neh terima kasih. Salam dr Tanah Melayu

    BalasHapus
    Balasan
    1. terimakasi kembali dan salam juga dari tanah airku Indonesia

      Hapus
  3. Lihat demonya dlu,, ntar kalau udah sreg saya coba

    BalasHapus
  4. wah artikel tentang cara membuat daftar isi yg kemarin belum sempat mencoba eh ini sudah ada lagi cara baru.aq save dulu yambak

    BalasHapus
    Balasan
    1. membagikan updatetan yang terbaru biar tidak bosen mas pembaca mengunjungi blog simple ini,hehe

      Hapus
  5. Sip,,,, (o)
    Ctrl + D dulu, entar saya coba,,,

    BalasHapus
  6. sy keep nih tulisannya .... boleh tho ...... (o)

    BalasHapus
  7. Wuiiih Mbak Devi nie bener-bener jagonya nie masalah yang beginian, keren banget mbak saya dah liat demonya :)

    BalasHapus
    Balasan
    1. yang lain juga masih ada kok mas yang lebih hebat,saya cuma penerus mereka,,hehe

      Hapus
  8. ini sih CSS yang tidak terlalu ribet dan mudah untuk tuk di coba.... (o)

    BalasHapus
  9. Ane udah liat demonya, keren banget hasilnya.

    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