Hover Image with Effect

CSS hover image dimaksudkan untuk membuat penggunaan image dalam blog bisa lebih diperkecil sehingga penataan posting juga menjadi lebih mudah. Dengan hover image with effect maka image hanya akan ditampilkan dalam bentuk thumbnail dengan tinggi 100px dan lebar secara otomatis menyesuaikan diri sebanding dengan ukuran image sesungguhnya. Image dalam ukuran lebih besar hanya akan ditampilkan ketika cursor diarahkan di atas thumbnail. Dengan memanfaatkan properti css3 transition, penampakan image akan berjalan melalui transisi waktu yang disertai effek opacity. Waktu transisi ini dapat diperbesar atau diperkecil dengan mengatur nilai (value) css3 transition property.

CSS3 hover image dapat diterapkan untuk membentuk sebuah image gallery sekaligus dapat juga digunakan gambar tunggal seperti yang biasa digunakan untuk posting. Untuk membuat fungsi seperti di atas, pengaturan/setting dilakukan melalui penggunaan floating position pada kode css.

D E M O :

Arahkan cursor di atas thumbnail untuk menampilkan image yang berukuran lebih besar.

Kode CSS :

.GRflying_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.GRflying,.GRflying_kiri,.GRflying_kanan{
        position:relative;
        cursor:pointer;
}
a.GRflying,a.GRflying span,a.GRflying_kiri,a.GRflying_kiri span,a.GRflying_kanan,a.GRflying_kanan span{
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
a.GRflying img,a.GRflying_kiri img,a.GRflying_kanan img{
        height:100px;
        width:auto;
        margin:2px;
        padding:4px;
        background:#666;
        border:2px solid #eee;
        border-radius:5px;
        box-shadow:0 0 6px #999;
        opacity:0.7;
        filter:alpha(opacity=70);
}
a.GRflying_kiri{margin:5px 12px 5px 0;float:left;}
a.GRflying_kanan{margin:5px 0 5px 12px;float:right;}
a.GRflying:hover img,a.GRflying_kiri:hover img,a.GRflying_kanan:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span,a.GRflying_kiri span,a.GRflying_kanan span{
        display:block;
        position:absolute;
        top:-400px;
        z-index:-10;
        opacity:0;
        filter:alpha(opacity=0);
}
a.GRflying_kiri span,a.GRflying_kanan span{top:-300px;}
a.GRflying span{left:-90%;}
a.GRflying_kiri span{left:0;}
a.GRflying_kanan span{right:0;}
a.GRflying:hover span,a.GRflying_kiri:hover span,a.GRflying_kanan:hover span{
        z-index:999;
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span img,a.GRflying_kiri span img,a.GRflying_kanan span img{
        background:rgba(0,0,0,0.4);
}
a.GRflying:hover span img,a.GRflying_kiri:hover span img,a.GRflying_kanan:hover span img{
        width:auto;
        height:300px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}

Kode CSS image di sebelah kiri:

<a class="GRflying_kiri" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS image di sebelah kanan:

<a class="GRflying_kanan" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS Image Gallery:

<div class="GRflying_gallery">
<a class="GRflying" href="URL-1"><img src="thumb-1.jpg" /><span><img src="image-1.jpg" /></span></a>
<a class="GRflying" href="URL-2"><img src="thumb-2.jpg" /><span><img src="image-2.jpg" /></span></a>
<a class="GRflying" href="URL-3"><img src="thumb-3.jpg" /><span><img src="image-3.jpg" /></span></a>
<a class="GRflying" href="URL-4"><img src="thumb-4.jpg" /><span><img src="image-4.jpg" /></span></a>
</div>