8.4.14
25
Membuat Teks Descripsi Pada Gambar Hover - Membuat atau menyisipkan gambar tidak akan pernah lepas dari sebuah artikel pada blog, karena dengan adanya gambar dapat membantu menerangkan apa makna descripsi atau tujuan tulisan tersebut, namun gambar hanyalah sebuah hiasan semata dalam sebuah artikel, karena sebagus apapun gambar yang Anda sisipkan tidak akan berpengaruh terhadap index google.
Membuat gambar disebagian teks artikel merupakan trik SEO optimasi, namun bukan fisik gambar yang perlu diperhatikan, tetapi lebih kepada Pemasangan Title Tag Dan Atribut Pada Link URL yang Anda tuliskan, nah..!! title teks dan atribut pada gambar inilah yang di index oleh google sebagai pengganti teks apabila gambar gagal termuat saat loading blog.

Karena gambar hanya merupakan hiasan pada teks tulisan, alangkah indahnya gambar tersebut jika Anda berikan sedikit sentuhan efek. Tidak jauh berbeda pada artikel sebelumnya tentang Efek Sliding Pada Gambar Postingan, Kesempatan kali ini saya akan memberikan 9 Koleksi Membuat Teks Descripsi Pada Gambar Hover yang terspesial dan khusus buat semua sahabat pecinta SAHABAT BLOGGER 77. Sebelum ketahap penyusunan kode, bagaimana jika Anda pilah-pilih dahulu efek gambar mana yang sesuai dihati pada tombol DEMO SHOW dibawah ini

Image hover description




DEMO SHOW



Bagaimana, sudah ada pilihan belum.? hehe.. kita lanjut ketahap selanjutnya. Kita buat rangka elemen HTML-nya terlebih dahulu seperti ini


<div class="view view-fourth">
<img src="...URL-Gambar (1).jpg" /> 
   <div class="mask">
       <h2>Sahabat blogger 77</h2>
...*/ Descripsi teks Anda tulis disini ...*/
   <a class="info" href="#">Read More</a>
   </div>
</div>
<div class="view view-fourth">
<img src="...URL-Gambar (2).jpg" /> 
    <div class="mask">
        <h2>Sahabat blogger 77</h2>
*// Teruskan jika Ingin Menambahkan lebih banyak gambar lagi *//
    </div>
</div>


Untuk memenuhi permintaan elemen class pada HTML diatas, kita buat pembangun selector CSS seperti ini

.view-fourth img {
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}

.view-fourth .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transform: scale(0) rotate(-180deg);
   transition: all 0.4s ease-in;
   border-radius: 0px;}

.view-fourth h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   transition: all 0.5s ease-in-out;}

.view-fourth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition: all 0.5s ease-in-out;}

.view-fourth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition: all 0.5s ease-in-out;}

.view-fourth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   transform: scale(1) rotate(0deg);
   transition-delay: 0.2s;}

.view-fourth:hover img {
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition-delay: 0s;}

.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   transition-delay: 0.5s;}


Dan sampai disini, beres semua pekerjaan rangkaian kode, sebagai tambahan mungkin Anda ingin membuat efeknya bekerja pada beberapa gambar yang Anda tambahkan, misalnya Anda ingin menambahkan 3-4 gambar, agar muat gambar responsive gunakan kode CSS-layout berikut

.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(..Gambar-background.jpg) no-repeat center center;}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;}
.view img {display: block;position: relative;}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
   border-bottom: 2px solid orange;}
.view p {
   font-family: Arial, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #222;
   color: #fff;
   text-transform: uppercase;
   box-shadow: 0 0 1px #000;}
.view a.info: hover {background-color: #222;box-shadow: 0 0 5px #000;}


TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Teks Descripsi Pada Gambar Hover
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 =

25 komentar

  1. wah keren mbak
    kapan" boleh dicoba nich.
    :d :d :d

    BalasHapus
  2. kalau untuk iklan rasanya bagus ya :)

    BalasHapus
    Balasan
    1. benar mbak, biasanya untuk tampilan iklan sering menggunakan ini, terlebih pada web 2.0

      Hapus
    2. mantap nih buat slide warna boleh jg

      Hapus
    3. ini untuk semua demo ya? dan gmn caranya masukin perdemo?

      Hapus
  3. saya lihat demonya keren sekali :D
    untuk iklan mandiri pastinya lebih atraktif ya :)

    BalasHapus
  4. Menarik tutorialnya Mbak Devy, perlu saya coba nih
    Keren di lihat dari demonya. terima kasih Mbak atas artikelnya

    BalasHapus
  5. Saya sudah melihat demonya mbak, memang tampilannya besar ya dibuat

    BalasHapus
    Balasan
    1. sebenarnya ini atas permintaan sahabat kita mas dalam dunia bloger, beliau meminta dibuatkan desain gambar untuk iklan pada blognya, karena banyak style dan gaya jadi saya tampilkan 1 tutorial dan selebihnya pilihannya pada tampilan DEMO

      Hapus
  6. langsung coba ah biar paham, soalya belum pernah tau.

    makasih ya

    BalasHapus
  7. gak tau mw komeng ap..!,,yg pastinya jempol buat mba..!, skalian cicipi langkhnya..moga bisa sukses terapinnya..!

    BalasHapus
    Balasan
    1. gimana kalau dikasih es krim aja mas, kalau jempolkan saya sudah punya mas,,hehe
      semoga tutorial saya dapat sukses mas terapin
      amin...

      Hapus
  8. Wah rupanya begitu ya supaya tdk hanya sebagai penghias arrtikel, saya nggak pernah peduliin title tag dan atribt pada gambar, sayang skali melewatkan optimasinya...
    Makasih mba triknya...tinggal praktek

    BalasHapus
  9. Mantap tutorialnya Mbak, kami langsung coba caranya ya, mau dicoba untuk artikel terkait dengan tampilan keren seperti ini

    BalasHapus
  10. Wih Keren Yah.Kalau Di Jadiin Space Iklan Jadi Mantep Tu :D

    Oh ya Salam Kenal Juga Blogger Gamers :)

    BalasHapus
  11. tanpa menunggu lama lagi
    langsung di garap nih kode scripnya
    thanks mbak :))

    BalasHapus
  12. wah keren banget mbak teks deskripsi pada gambar hovernya, boleh juga nih dicoba :)

    BalasHapus
  13. Wihh keren... kerennya pake banget nih :D,,, Saya coba dulu mbak, semoga aja bisa hehe.. *maklum saya masih nubi b-( *

    BalasHapus
  14. Wah selain keren gambar yang kita pasang juga bisa bagus di mata google ya mbak.. Keren dech kalau gitu mbak. Saya bookmark dulu ya mbak tutornya.?

    BalasHapus
  15. menarik nih tutornya,kalau main keblog ini selalu ada aja deh sensasi baru yang bikin penasaran.izin mencobanya mbak

    BalasHapus
  16. hmmm.... saya harus bilang apa ya.. Mbak Devy luar biasa kayaknya untuk urusan kode beginian sementara saya tak paham satupun.. hi...hi... Mungkin ini sudah tingkat advance ya Mbak?
    Sepertinya saya harus lebih sering berkunjung ke sini dan mengobrak-abrik semua halaman agar ketemu artikel paling dasar biar bisa belajar dari awal.

    BalasHapus
  17. heheh saya download template yang sudah ada tooltipnya mas, jadi gag pasang lagi

    BalasHapus
    Balasan
    1. tooltip dengan descripsi 2 hal yang sangat jauh berbeda mas,lagian apa hubungannya ya tooltip dengan descripsi teks,

      dan tooltip auto pada template hanya bisa dibuat pada url tertentu saja mas, contohnya link beranda, judul blog,pupolar post dan artikel terkait selebihnya kita kudu buat manual jika untuk internal link

      Hapus
  18. langsung praktek cara membuat teks descripsi pada gambar hover ,,,,,,,,,,,,

    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