Bootstrap snippet: image with label

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: image,label,block



<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <!-- Block Default - More info over block --> <div class="wp-block inverse no-margin"> <div class="figure"> <img src="http://lorempixel.com/400/400/sports/1/"> <div class="wp-block-info-over left"> <h2> <span class="pull-left"> <a href="#">My favorite sport</a> <span class="label label-primary">Lorem ipsum</span> </span> </h2> </div> </div> <h2 class="title">Lovely template design</h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <!-- Block Default - More info over block --> <div class="wp-block inverse no-margin"> <div class="figure"> <img src="http://lorempixel.com/400/400/technics/7/"> <div class="wp-block-info-over left"> <h2> <span class="pull-left"> <a href="#">This is a block label</a> <span class="label label-primary">Lorem ipsum</span> </span> </h2> </div> </div> <h2 class="title">Lovely template design</h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <!-- Block Default - More info over block --> <div class="wp-block inverse no-margin"> <div class="figure"> <img src="http://lorempixel.com/400/400/technics/1/"> <div class="wp-block-info-over left"> <h2> <span class="pull-left"> <a href="#">Creating my new app</a> <span class="label label-primary">Lorem ipsum</span> </span> </h2> </div> </div> <h2 class="title">Lovely template design</h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p> </div> </div> </div> </div>
.wp-block { margin: 0 0 15px 0; -webkit-transition: all .3s linear; transition: all .3s linear; position: relative; cursor: default; border-radius: 2px; } a:hover{ text-decoration:none; } .no-margin { margin: 0 !important; } .wp-block.inverse .figure { position: relative; } .wp-block.inverse .figure img { width: 100%; } .wp-block-info-over.left { background: transparent; border: 0; padding: 0; position: absolute; bottom: 55px; left: 0; } .wp-block-info-over { width: 100%; padding: 10px; background: #9cd70e; border-top: 1px solid #e0eded; } .wp-block-info-over.left h2 { font-size: 13px; font-weight: normal; } .wp-block.inverse h2, .wp-block.inverse .title { margin: 0; padding: 12px 15px 0 0; font-weight: 500; font-size: 16px; color: #333; text-transform: none; } .wp-block-info-over.left h2 a { padding: 10px 15px 20px 15px; margin: 0; font-size: 16px; text-transform: capitalize; font-weight: 600; background: rgba(51,51,51,0.8); background: #2c3e50; color: #fff; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .wp-block-info-over.left h2 .label { position: absolute; bottom: -30px; left: 15px; padding: .5em .6em .5em; } .wp-block.inverse h2, .wp-block.inverse .title { margin: 0; padding: 12px 15px 0 0; font-weight: 500; font-size: 16px; color: #333; text-transform: none; } .label { border-radius: 0; }
Dey-Dey

image with label

Dey-Dey
  Jun 8th 2015, 08:33
2.6K Views