image badge

This bootstrap snippet called "image badge" 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: badge,image,gallery

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-6">
    		<div class="relative">
        		<img src="https://lorempixel.com/400/260/nature/1/" class="img-responsive" alt="">
        		<a href="#" class="badge-corner">
        			<span class="fa fa-thumbs-o-up"></span>
        		</a>
        	</div>
    	</div>
    	<div class="col-md-4 col-sm-4 col-xs-6">
    		<div class="relative">
        		<img src="https://lorempixel.com/400/260/nature/2/" class="img-responsive" alt="">
        		<a href="#" class="badge-corner badge-corner-base">
        			<span class="fa fa-thumbs-o-up"></span>
        		</a>
        	</div>
    	</div>
    	<div class="col-md-4 col-sm-4 col-xs-6">
    		<div class="relative">
        		<img src="https://lorempixel.com/400/260/nature/3/" class="img-responsive" alt="">
        		<a href="#" class="badge-corner badge-corner-alt">
        			<span class="fa fa-thumbs-o-up"></span>
        		</a>
        	</div>
    	</div>
        <hr>
        <div class="col-md-4 col-sm-4 col-xs-6">
    		<div class="relative">
        		<img src="https://lorempixel.com/400/260/nature/4/" class="img-responsive" alt="">
        		<a href="#" class="badge-corner badge-corner-light">
        			<span class="fa fa-heart"></span>
        		</a>
        	</div>
    	</div>
    	<div class="col-md-4 col-sm-4 col-xs-6">
    		<div class="relative">
        		<img src="https://lorempixel.com/400/260/nature/5/" class="img-responsive" alt="">
        		<a href="#" class="badge-corner badge-corner-dark">
        			<span class="fa fa-heart"></span>
        		</a>
        	</div>
    	</div>
    	<div class="col-md-4 col-sm-4 col-xs-6">
    		<div class="relative">
        		<img src="https://lorempixel.com/400/260/nature/6/" class="img-responsive" alt="">
        		<a href="#" class="badge-corner badge-corner-orange">
        			<span class="fa fa-heart"></span>
        		</a>
        	</div>
    	</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;
}

.mt-20 {
  margin-top: 20px !important;
}

.relative {
    position: relative;
}

.badge-corner:empty {
    display: inline-block;
}
.badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 66px solid #888;
    border-top-color: rgba(0, 0, 0, 0.3);
    border-left: 66px solid transparent;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.badge-corner span {
    position: absolute;
    top: -52px;
    left: -28px;
    font-size: 16px;
    color: #fff;
}
.badge-corner-base {
    border-top-color: #3498db;
}
.badge-corner-alt {
    border-top-color: #9cd70e;
}
.badge-corner-light {
    border-top-color: #ecf0f1;
}
.badge-corner-light span {
    color: #2c3e50;
}
.badge-corner-dark {
    border-top-color: #131313;
}
.badge-corner-orange {
    border-top-color: #ff8a3c;
}

.relative img{
    margin-top:6px;    
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 16th 2015, 23:46

Views: 7.4K

Rated 5/5 based on 3 reviews