Cara Membuat Hover Gambar di Blog

cara membuat image hover tambah detail atau keterangan ketika disorot mouse, sebelumnya saya telah mempraktekannya dan  membuat sebuah Galeri Foto dengan menggunakan javascript dan css tetapi ada sedikit masalah dan tidak jadi saya sharing. Dalam tutorial ini hanya menggunakan sedikit kode css saja,

Caranya:

Seperti biasa untuk penempatan kode css diatas kode ]]></b:skin>  letakan kode css dibawah ini diatasnya

/*Kolom Image*/
ul.columns {
    width: 960px;
    list-style: none;
    margin: 0 auto; padding: 0;
}
ul.columns li {
    width: 220px;
    float: left; display: inline;
    margin: 10px; padding: 0;
    position: relative;
}
ul.columns li:hover {z-index: 99;}
/*Thumbail Styles*/
ul.columns li img {
    position: relative;
    filter: alpha(opacity=30);
    opacity: 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*SpesIE*/
}
ul.columns li:hover img{
    z-index: 999;
    filter: alpha(opacity=100);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/*Hover Size*/
ul.columns li .info {
    position: absolute;
    left: -10px; top: -10px;
    padding: 210px 10px 20px;
    width: 220px;
    display: none;
    background: #ff0000;
    font-size: 1.2em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
    font-size: 1.2em;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Untuk pemanggilan efeknya memerlukan satu kode lagi, yaitu kode dibawah ini bisa anda letakan dipostingan Edit HTML bukan compose atau di Edit Element add gadget html/javascript. Dan untuk memperbanyak lagi foto anda cukup kopi paste kode dibawah ini dibawahnya lagi.

<ul class="columns">
    <li>
        <a href="link blog/postingan"><img src="URL Gambar" alt="Nama Gambar/Foto" /></a>
        <div class="info">
            <h2>Title</h2>
            <p>Deskripsikan Detail Foto/image Anda</p>
        </div>
    </li>
</ul>

Jika anda tidak ingin memakai link ketika di klik gambar maka hapus kode yang berwarna merah, dan jika anda ingin merubah ukuran kolom dan ukuran gambarnya anda bisa rubah kode yang berwarna biru. Untuk mengganti warna background ketika disorot mouse anda bisa rubah kodewarna yang berwarna hijau.

 

Semoga sahabat bloger bisa lebih baik lagi .....