Slide Gambar Dengan Tooltip

Slide Gambar Dengan Tooltip - Secara umum efek tooltip akan ditampilkan saat objek diHover, seperti tampilan tag elemen pada teks link, sebelum link tersebut di KLIK, maka akan menampilkan beberapa tulisan untuk menerangkan bahwa Anda akan diarahkan ke-alamat tersebut jika LINK diklik. Dengan JavaScript Anda bisa Mengubah Variasi Tooltip Dengan Efek Transisi seperti yang saya lakukan pada artikel sebelumnya. Desain kali ini kita gunakan gambar sebagai objek, agar tampilan gambar saat di HOVER terlihat menarik kita beri efek slide dengan tooltip untuk menampilkan sedikit ringkasan teks deskripsi sebagai keterangan gambar seperti ini:

Top daftar isi - Diary Notes Theme Sitemap Responsive



Desain efek slide gambar dengan tooltip seperti ini akan sangat membantu buat sahabat semua pecinta SAHABAT BLOGGER 77 yang dominan menampilkan gambar dalam postingan artikel, sehingga gambar yang akan Anda tampilkan sudah memiliki keterangan teks jika gambar tersebut di HOVER oleh pengunjung. Mau mencoba menghias tampilan gambar posting Anda dengan efek slide tooltip show seperti ini, berikut kode CSS lengkapnya:

<style type='text/css'>
#tooltip-image {width:410px;float:left;border-radius:50%}
.container {
  width:110px;height:110px;margin:0 0 30px 10px;
  position:relative;border-radius:60px; 
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2); 
  transition:all .5s; overflow:hidden}

.photo {
  width:90px;height:90px;margin:8px;
  border-radius:50%;position:absolute;left:0px;
  overflow:hidden;top:0;border:2px solid white}

.pic{max-width:100%}
.buttonLogo:hover {border:3px solid #5ca321}}
.buttonLogo { 
  width:60px;height:60px;position:absolute;
  right:20px;top:25px;border-radius:50%;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONeszZgFgojLOYXyyC1eWSEYC34zs9J1I6AL1uIzGeFNzWlEqui-bAK7nZyNw9uT5xjsqP7pm_ECO1qX7bqlkrOnhaZndtjc7xu9y6DmHIapr246z8BQwcW3vVYxWeawDoZJBMTUTAsI/s75/sb-77+logo.png) no-repeat center center;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 0 5px rgba(255,255,255,.3),0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;cursor:pointer}

.name{
  height:60%;width:180px;position:absolute;
  right:80px;padding:20px;font:25px arial;
  color:white;  opacity:0;
  transition:all .5s .5s;top:0;
  text-shadow:1px 2px 3px #111}

.small {font-size:14px; display:block; margin-top:10px; }
.comment {
  width:370px;position:relative;padding:15px;
  font-size:16px;color:rgba(0,0,0,.7);
  border-radius:10px;background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;transition:all 1s;border-bottom:2px solid #080}

.container:hover{width:400px}
.container:hover .name,.container:hover + .comment{opacity:1}
.comment:before {
  content:'';width:0;height:0;position:absolute;
  bottom:100%;left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent}
</style>

Hasilnya:





DEMO SHOW




Sedikit tambahan, pada tampilan logo sudah saya format dengan link-eksternal yang sudah mengarah pada halaman home-page blog Anda pada pengaturan HTML dibawah ini, Anda tinggal menuliskan teks apa yang akan ditampilkan sebagai keterangan gambar pada tampilan tooltip seperti ini:

<div id="tooltip-image">
    <div class="container">
         <a class="buttonLogo" expr:href="data:blog.homepageUrl"></a>
                 <div class="name">
                         Devy Indriyani
                    <span class="small">Sahabat Blogger 77</span>     
                 </div>
    <div class="photo">
        <img src="URL-Gambar Anda.jpg" alt=".." class="pic">
    </div>
    </div>
  <p class="comment">
       Tulis Sesuatu Disini...
 </p>
</div>

Seperti Cara Menempatkan Kata Kunci Yang Tepat disetiap postingan blog Anda untuk mendongkrak popularitas SEO-traffict, namun tampilan blog yang cantik dan menarik juga tidak kalah pentingnya untuk mengundang pengunjung hadir di blog Anda. Semoga Cara Membuat Efek Slide Gambar Dengan Tooltip kali ini membuat pengunjung blog betah berlama-lama di blog Anda, dan berharaplah agar mereka mau menginap disana. hehe...

Dan akhir kata Devy ucapkan Terima Kasih...

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Slide Gambar Dengan Tooltip
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/2015/01/slide-gambar-dengan-tooltip.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77