image with label

This bootstrap snippet called "image with label" 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: image,label,block

HTML code

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

<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="https://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="https://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="https://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>

CSS code

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


.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;
}

                                    

Similar snippets

Bootstrap snippet gallery with small images

gallery with small images

View

Bootstrap snippet Contact list label

Contact list label

View

Bootstrap snippet Social network post image

Social network post image

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 17th 2015, 00:20

Views: 4.9K

Rated 5/5 based on 3 reviews