Bootstrap snippet: image badge

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: badge,image,gallery



<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="http://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="http://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="http://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="http://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="http://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="http://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>
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; }
Dey-Dey

image badge

Dey-Dey
  Jul 2nd 2015, 08:33
3.5K Views