22.1.15
23
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:


Tooltip show image hover




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 >>
= TERIMA KASIH =

23 komentar

  1. wah desain slide gambar ini cantik bener deh mbk, siapa yang buat? mbk Devy gitu. hehee

    BalasHapus
  2. slide nya bagus dan perpaduan warna yg elegan ,,
    tpi kenapa yah ,,, sy gak bisa fokus di slide nya ,,
    kek nya fokus sy terganggu gegara photo yg ada di slide nya deh ,,,hehehe :)

    BalasHapus
    Balasan
    1. saya juga sama mas fiu, ga bisa fokus.
      :d

      Hapus
    2. ah ,,, ini kg jum ikut2 aja ih ,,,, pasti devy nya lngsung ngilang nih ,,,hehehe [-(

      Hapus
    3. :o
      cangkul.. cangkul.. cangkul yang dalam..
      menanam jagung di kebun kita..

      Hapus
  3. demen liat demo shownya, ilang timbul, ilang timbul gitu...
    bisa dipasang ancur link juga kan mbak, tes tkp ah...makasih mbak Dev

    BalasHapus
    Balasan
    1. kira-kira ancur link itu apa ya mas buret.?

      Hapus
  4. mantab gan.salam kenal gan
    http://nabilamebel.com/sofa-jati-minimalis-murah/

    BalasHapus
  5. terima kasih atas informasinya ya... belum pernah mencuba untuk yang ini... biasa biasa aja

    BalasHapus
  6. kayaknya aku kabita deh, pengen ganti Blogger Friend nya sama yang ini..

    BalasHapus
  7. hmm tampilan nya cantik mba devi :)

    BalasHapus
  8. beanr-benar keren dan menarik mbak, dah gitu cepat tu slidenya (h)

    BalasHapus
  9. wah bagus nih mbak kunjungan malam

    BalasHapus
  10. Vy.. mau nanya..!
    cara kombinasikan box shadow dengan efek hover bagaimana ya?
    tanpa menyusun css pembangunnya seperti di

    http://sahabatblogger77.blogspot.com/2014/09/mengontrol-efek-gerak-dengan-perintah-hover.

    maksdunya:
    css yg Devy bagi di ats.. box shadownya sy ambil (hanya kode box shadow.. latar oval persegi panjang yg warna abu2 .. yg ada foto devy yg susah bikin tidur ituh :>).. )

    untuk menambahkan efek hover bagaimana ya? tanpa menyusun css khusus begitu..!
    , sebenarnya.. mulanya cuma dipasang2 saja.. eee.. efeknya jadi transparan di balik judul blog.. hasilnya mirip di dalam gelembung air.. makasi sebelumnya ya..!

    (nda usah buru2 jawabnya.. silahkan beraktifits seperti biasa)

    BalasHapus
    Balasan
    1. Devy sudah lihat mas, judul blog dibuat border, namun letak link diluar wilayah box, jadi disana hover akan terjadi hanya jika mouse berada diatas teks, sedangkan bila kita letakkan panah mouse diluar teks tetapi masih dalam area box, efek hover tidak ada.
      elemen hover untuk tag a:hover harus diubah mas dengan elemen berbeda, agar saat dihover semua wilayah tag terjadi

      defaulnya elemen link a seperti ini:
      a {color:......;}
      a:hover {color:.....}


      jadi harus kita ubah dengan menambahkan area box dengan atribut kelas atau id seperti ini:

      .box a {color:.....}
      .box a:hover {color:....}


      sedangkan untuk box-shadow, mas bisa lihat kodenya disini:

      » Mengenal CSS Dasar Box Shadow

      Hapus
  11. wah bagus nich mbak,, dengan menggunakan efek slide seperti itu bisa menghemat ruang didalam blog.. terimakasih mbak, bisa di coba...

    BalasHapus
  12. keren banget mba, barusan saya lihat demo nya, nanti deh saya mau coba tak pasang :d

    BalasHapus
  13. waw keren, bagus juga nih buat author box..
    besok bisa modif-modif template lagi..

    BalasHapus
  14. keren banget mba..langsung dicoba ah.. (h)

    BalasHapus
  15. Nah ini dia yang saya cari cari, harus di coba supaya si blog tambah cakep.

    BalasHapus
    Balasan
    1. seperti adminnya kan?.. jujur saja dh Yos..
      sy saja jujur bilangnya, bahwa si admin memang cakep..

      Hapus
  16. Keren efeknya mba devi, saya sudah praktekan.. terimakasih ya...
    tapi saya bingung kok lengkungannya di buat agar kotak bagai mana yah [-(

    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