Cara Membuat Hover Gambar di Blog

Cara membuat image hover tambah detail atau keterangan ketika disorot mouse, 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>

Keterangan:

• Jika anda tidak ingin memakai link ketika di klik gambar maka hapus kode yang berwarna merah,
• 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 kode warna yang berwarna hijau.

Demikian cara membuat hover gambar di-blog.html

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

sumber: fahrezanugraha.blogspot.com

Posted in: Blogger Tutorial