Memberi Tanggal Terbit Pada Gambar Saat Hover

Memberi Tanggal Terbit Pada Gambar Saat Hover - Salah satu hal termudah dalam mengubah tampilan blog agar terlihat menarik adalah dengan cara mengubah tampilan gambar pada postingan. Seperti pertemuan kali ini SAHABAT BLOGGER 77 kembali menyapa sahabat semua dengan tutorial sederhana tentang cara memberi tanda pada gambar postingan dengan tanggal terbit, judul gambar dengan efek hover.

Tampilan gambar akan terlihat wajarnya saat Anda menyisipkan gambar pada postingan, namun tanggal terbit pada gambar akan ditampilkan hanya jika gambar dilintasi oleh mouse seperti ini:

Seperti Efek Hover Gambar Dengan Desain Buka Tutup untuk menampilkan descripsi keterangan gambar, efek gambar kali ini saya memberi efek background blur-transparent pada gambarnya dengan kode pembentuk CSS seperti ini:

.info {width: 300px;height: 225px;}
.img-line .item-hover .mask {
  background-color:#000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);        
  opacity:0.5;
  z-index:0;}

Hasilnya :




DEMO SHOW



Inspirasi ini saya desain ulang karena beberapa waktu lalu saya pernah melihat gallery Template buatan Kate Michelin, dimana setiap gallery gambar beliau diberikan efek seperti ini saat akan mereview tampilan templatenya sebelum menekan tombol link download. Mungkin dengan efek seperti ini, akan memberikan sentuhan menarik jika Anda ingin membuat beberapa gallery gambar dengan memberi judul pada gambar, tanggal gambar diterbitkan, sehingga setiap masing-masing gambar akan memiliki keterangan.

Bagaimana, sahabat mau mencoba?
Berikut kode lengkapnya:

<style type='text/css'>
//* Image hover effect on dates show with css
input data: no javascript
visit: http://sahabatblogger77.blogspot.com
published on November 14, 2014
modified by. Devy Indiyani */
.stage {margin:0 auto;position:relative;padding:5px;text-align:center;}
.stage,.item-hover,.item-hover .mask,.item-img,
.info {width: 300px;height: 225px;}
.item-hover,.item-hover .mask,
.img-line .item-hover:hover .line {width:90%;}
.img-line .item-hover:hover {opacity:1;}
.item-img {
  background-color:#7a548f;
  z-index:0;
  position:absolute;
  top:0;left:0;}

.img-line .item-hover {
  z-index:100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity:0;
  cursor:pointer;     
  display:block;
  text-decoration:underline;
  text-align:center;}
  
.img-line .info {
  z-index:10;
  color:#00ff00;
  display:table-cell;
  vertical-align:middle;
  position:relative;
  z-index:5;}
  
.img-line .info .text {font-size:18px;}
.img-line .info .line {
  height:1px;
  width:0%;
  margin:5px auto;
  background-color:#ffffff;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;}
  
.img-line .info .date {font-size:12px;}
.img-line .item-hover .mask {
  background-color:#000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity:0.5;
  z-index:0;}
</style>

Cukup copy kode CSS diatas, lalu temukan kode ]]></b:skin> pada Template Anda, selanjutnya letakkan kode tersebut diatasnya. Selanjutnya tempatkan kode HTML berikut pada formulir postingan Anda mode tulis HTML bukan yang Compose, seperti ini:

<div class="stage">
   <div class="stage img-line">
     <a class="item-hover" href="">
       <div class="info">
         <div class="text">
            Sahabat Blogger 77
         </div>
       <div class="line"></div>
         <div class="date">
            November 14, 2014
         </div>
       </div> <!..ending info..!>
     <div class="mask"></div>
     </a>
       <div class="item-img">
        <img alt="" src="Url-Gambar Anda.jpg"/>
       </div>
   </div> <!..ending img-line..!>
</div> <!..ending stage..!>