Blog Gallery Widget

This bootstrap snippet called "Blog 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: blog,post,image,widget

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="row">
		<div class="col-md-6">
		    <a href="javascript:;" class="widget widget-image">
		        <div class="widget-image-cover">
		            <img src="https://lorempixel.com/500/500/nature/3/" alt="">
		        </div>
		        <div class="widget-image-info">
		            <h5>Consectetur adipiscing elit. </h5>
		            <p>
		                Curabitur ullamcorper mi ut rutrum gravida commodo tellus.
		            </p>
		            <div class="row">
		                <div class="col-md-6">
		                    <div class="widget-image-user">
		                        <div class="widget-image-user-image">
		                            <img src="https://bootdey.com/img/Content/user_1.jpg" alt="">
		                        </div> 
		                        <div class="widget-image-user-info">
		                            <div>Haydar Juan</div>
		                            <span>45 minutes ago</span>
		                        </div>
		                    </div>
		                </div>
		                <div class="col-md-6">
		                    <div class="widget-image-rating-text">8,281 Reviews (4.0/5)</div>
		                </div>
		            </div>
		        </div>
		    </a>
		</div>
		<div class="col-md-6">
		    <a href="javascript:;" class="widget widget-image">
		        <div class="widget-image-cover">
		            <img src="https://lorempixel.com/500/500/nature/5/" alt="">
		        </div>
		        <div class="widget-image-info">
		            <h5>Consectetur adipiscing elit. </h5>
		            <p>
		                Curabitur ullamcorper mi ut rutrum gravida commodo tellus.
		            </p>
		            <div class="row">
		                <div class="col-md-6">
		                    <div class="widget-image-user">
		                        <div class="widget-image-user-image">
		                            <img src="https://bootdey.com/img/Content/user_2.jpg" alt="">
		                        </div> 
		                        <div class="widget-image-user-info">
		                            <div>Haydar Juan</div>
		                            <span>45 minutes ago</span>
		                        </div>
		                    </div>
		                </div>
		                <div class="col-md-6">
		                    <div class="widget-image-rating-text">8,281 Reviews (4.0/5)</div>
		                </div>
		            </div>
		        </div>
		    </a>
		</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{margin-top:20px;}

.widget.widget-image {
    overflow: hidden;
}

.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-image-cover {
    margin: -20px;
    padding: 100% 20px 20px;
    border-radius: 5px;
    overflow: hidden;
    background: #3C454D;
    position: relative;
}

.widget-image:hover .widget-image-cover img {
    max-width: 110%;
    min-height: 110%;
    margin-left: -5%;
    margin-top: -5%;
}

.widget-image .widget-image-cover img {
    transition: all .1s ease-in-out;
}

.widget-image-cover img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    max-width: 100%;
}

.widget-image-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 75%);
    padding: 20px;
    color: #fff;
}

.widget-image-info h5 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
}

.widget-image-info p {
    color: rgba(255,255,255,.9);
}

.row {
    margin: 0 -10px;
}

.row>[class*=col-] {
    padding: 0 10px;
}

.widget-image-user .widget-image-user-image {
    border-radius: 36px;
    float: left;
    width: 36px;
    background: #fff;
}

.widget-image-user .widget-image-user-info {
    margin-left: 46px;
}

.widget-image-user .widget-image-user-image img {
    max-width: 100%;
    border-radius: 36px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Aug 30th 2015, 23:14

Views: 3.3K

Rated 5/5 based on 3 reviews