CSS Ngaleutikeun Image di blog

CSS Ngaleutikeun Image di blog nyaera kanggo midamel pamakean image dina blog tiasa langkung dileutikeun ku kituna penataan posting oge barobah kaayaan langkung gampil. Kalawan hover image with effect mangka image ngan bade dipidangkeun dina wangun thumbnail kalawan luhur 100px sarta rubak sacara otomatis menyesuaikeun diri sabanding kalawan ukuran image saestuna. Image dina ukuran langkung ageung ngan bade dipidangkeun sabot cursor diarahkeun di luhur thumbnail. Kalawan ngamangpaatkeun properti css3 transition,penampakan image bade mapan ngaliwatan transisi wanci anu dibarung effek opacity. Wanci transisi ieu tiasa digedean atawa dileutikeun kalawan tiasa ngatur nilaina (value) css3 transition property.

CSS Ngaleutikeun Image di blog tiasa diterapkeun kanggo nyieun hiji image gallery sakaligus tiasa oge dipake gambar tunggal sepertos anu dawam dipake kanggo posting. Kanggo midamel kadudukan sepertos di luhur,pengaturan/setting dipigawe ngaliwatan pamakean floating position dina kode css.

D E M O :

Arahkeun cursor di luhur thumbnail kanggo mintonkeun gambar foto anu ukuranana langkung ageung.

Kode CSS :

.MBlgodor_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.MBlgodor,.MBlgodor_knca,.MBlgodor_kathu{
        position:relative;
        cursor:pointer;
}
a.MBlgodor,a.MBlgodor span,a.MBlgodor_knca,a.MBlgodor_knca span,a.MBlgodor_kathu,a.MBlgodor_kathu span{
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
a.MBlgodor img,a.MBlgodor_knca img,a.MBlgodor_kathu 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.MBlgodor_knca{margin:5px 12px 5px 0;float:left;}
a.MBlgodor_kathu{margin:5px 0 5px 12px;float:right;}
a.MBlgodor:hover img,a.MBlgodor_knca:hover img,a.MBlgodor_kathu:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.MBlgodor span,a.MBlgodor_knca span,a.MBlgodor_kathu span{
        display:block;
        position:absolute;
        top:-400px;
        z-index:-10;
        opacity:0;
        filter:alpha(opacity=0);
}
a.MBlgodor_knca span,a.MBlgodor_kathu span{top:-300px;}
a.MBlgodor span{left:-90%;}
a.MBlgodor_knca span{left:0;}
a.MBlgodor_kathu span{right:0;}
a.MBlgodor:hover span,a.MBlgodor_knca:hover span,a.MBlgodor_kathu:hover span{
        z-index:999;
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.MBlgodor span img,a.MBlgodor_knca span img,a.MBlgodor_kathu span img{
        background:rgba(0,0,0,0.4);
}
a.MBlgodor:hover span img,a.MBlgodor_knca:hover span img,a.MBlgodor_kathu:hover span img{
        width:auto;
        height:300px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}

Kode CSS image di palebah kenca:

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

Kode CSS image di palebah katuhu:

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

Kode CSS Image Gallery:

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