Membuat Teks Descripsi Pada Gambar Hover

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

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;}