Blog image Gallery Widget

This bootstrap snippet called "Blog image Gallery Widget" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: widget,image,block,post

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container bootstrap snippet">
    <div class="col-md-6">
        <div class="widget widget-gallery">
            <div class="widget-gallery-header">
                <h5>Latest Uploaded Image</h5>
                <p class="text-muted m-t-3">
                    last updated on 29 November 2015
                </p>
            </div>
            <ul class="widget-gallery-list clearfix">
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/3/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/4/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/5/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/6/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/7/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/8/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/9/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nature/3/" alt=""></a></li>
            </ul>
        </div>
    </div>
    
    
    <div class="col-md-6">
        <div class="widget widget-gallery">
            <div class="widget-gallery-header">
                <h5>Latest Uploaded Image</h5>
                <p class="text-muted m-t-3">
                    last updated on 29 November 2015
                </p>
            </div>
            <ul class="widget-gallery-list clearfix">
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/3/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/4/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/5/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/6/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/7/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/8/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/9/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/abstract/3/" alt=""></a></li>
            </ul>
        </div>
    </div>
    
    
    <div class="col-md-6">
        <div class="widget widget-gallery">
            <div class="widget-gallery-header">
                <h5>Latest Uploaded Image</h5>
                <p class="text-muted m-t-3">
                    last updated on 29 November 2015
                </p>
            </div>
            <ul class="widget-gallery-list clearfix">
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/3/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/4/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/5/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/6/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/7/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/8/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/9/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/fashion/3/" alt=""></a></li>
            </ul>
        </div>
    </div>
    
    
    <div class="col-md-6">
        <div class="widget widget-gallery">
            <div class="widget-gallery-header">
                <h5>Latest Uploaded Image</h5>
                <p class="text-muted m-t-3">
                    last updated on 29 November 2015
                </p>
            </div>
            <ul class="widget-gallery-list clearfix">
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/3/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/4/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/5/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/6/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/7/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/8/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/9/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/1/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/2/" alt=""></a></li>
                <li><a href="#"><img src="https://lorempixel.com/400/200/nightlife/3/" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
background:#eee;
margin-top:20px;
}

.widget {
    border: none;
    box-shadow: 0 2px 0 rgba(0,0,0,.07);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
    background: #fff;
    padding: 20px;
    display: block;
}

.widget-gallery-header {
    margin: -20px -20px 0;
    padding: 20px;
    border-radius: 5px 5px 0 0;
}

.widget-gallery-list {
    list-style-type: none;
    margin: -5px -20px -20px;
    padding: 3px 0 0 3px;
}

.widget-gallery-list>li {
    width: 25%;
    position: relative;
    padding-top: 25%;
    overflow: hidden;
    float: left;
}

.widget-gallery-list>li a {
    background: #EAEDEF;
    color: #aab3ba;
    text-decoration: none;
}

.widget-gallery-list>li img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    max-height: 100%;
}

.widget-gallery-header p {
    font-size: 12px;
}

.widget-gallery-header h5, .widget-gallery-header p {
    margin: 0;
}

.text-muted {
    color: #aab3ba;
}

.m-t-3 {
    margin-top: 3px!important;
}

.widget-gallery-list>li a:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    bottom: 50%;
    left: 50%;
    transition: all .2s ease-in-out;
    background: 0 0;
    z-index: 1020;
    border-radius: 50%;
}

.widget-gallery-list>li:hover a:before {
    content: '';
    left: 0;
    right: 3px;
    top: 0;
    bottom: 3px;
    background: rgba(0,0,0,.3);
    border-radius: 0;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Aug 30th 2015, 23:35

Views: 2.6K

Rated 5/5 based on 3 reviews