sprite in center in top and heading in bottom

BoxWithBackgroundImageAndHeadingbottomtopleftright.txt

<a href="javascript:void" class="tpa">
<figure>
<img src="images/technical.jpg" class="img-responsive">
</figure>
<div>
<h3>Technical Information</h3>
</div>
</a>

.tpa {
position: relative;
display: block;
margin-bottom: 35px;
transition: box-shadow ease-in .3s;
}

.tpa:hover {
box-shadow: 6px 6px 21px 5px rgba(51, 51, 51, .4);
}

.tpa div {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
background: rgba(51, 51, 51, .7);
}

.tpa div h3 {
margin: 0;
text-align: center;
text-transform: uppercase;
color: white;
}

Image-left-placed-content-on-right.html

 <article class="strongest clearfix">
<div class="world-st-image">
<img class="img-responsive" src="images/strongest.png"/>
</div>
<div class="world-st">
<h3>
THE WORLD’S STRONGEST STAINLESS BOLT
</h3>
<p>
Bumax is a premium brand manufacturing
</p>
<p>
We work constantly
</p>
<a class="learn-more" href="javascript:void">
<i class="fa fa-plus-circle">
</i>
Learn more
</a>
</div>
</article>

.world-st-image {
float: left;
width: 20%;
padding: 13px 15px;
}
.world-st {
float: left;
width: 80%;
}

imageAsBgWithBottomTitle-hover2-middle-content-with-border-10px.html

<a href="javascript:void" class="ibwbt ibwbt__subc ibwbt__mainc">
<figure>
<img src="images/cat5.jpg" class="img-responsive">
</figure>
<div class="caption">
<p>Range</p>
<h4>Stud and stud bolt</h4>
</div>
<div class="overlay">
<div class="wrap">
<div class="inner">
<p>Range</p>
<h4>Stud and stud bolt</h4>
</div>
</div>
</div>
</a>
.ibwbt {
position: relative;
display: block;
margin-bottom: 35px;
transition: box-shadow ease-in .3s;
-webkit-transition: box-shadow ease-in .3s;
-ms-transition: box-shadow ease-in .3s;
-moz-transition: box-shadow ease-in .3s;
-o-transition: box-shadow ease-in .3s;
}

.ibwbt:hover:not(.ibwbt__subc) {
box-shadow: 6px 6px 21px 5px rgba(51, 51, 51, .4);
-webkit-box-shadow: 6px 6px 21px 5px rgba(51, 51, 51, .4);
-ms-box-shadow: 6px 6px 21px 5px rgba(51, 51, 51, .4);
-moz-box-shadow: 6px 6px 21px 5px rgba(51, 51, 51, .4);
-o-box-shadow: 6px 6px 21px 5px rgba(51, 51, 51, .4);
}

.ibwbt > .caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
background: rgba(51, 51, 51, .7);
}

.ibwbt > .caption > h3,
.ibwbt > .caption > p {
margin: 0;
text-align: center;
color: white;
}

.ibwbt > .caption > p {
font-size: 14px;
}

.ibwbt__subc{

}

.ibwbt__subc .overlay{
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(85,195,227,0.80);
padding: 15px;
transition: all ease-in .3s;
-webkit-transition: all ease-in .3s;
-ms-transition: all ease-in .3s;
-moz-transition: all ease-in .3s;
-o-transition: all ease-in .3s;
}

.ibwbt__subc:hover .caption{
display: none;
}

.ibwbt__subc:hover .overlay{
opacity: 1;
visibility: visible;
}

.ibwbt__subc .overlay .wrap{
position: relative;
padding: 10px;
border: 1px solid #fff;
color: white;
height: 100%;
}

.ibwbt__subc .overlay .wrap h4{
text-align: center;
line-height: 1.4;
margin-top: 0;
text-transform: uppercase;
font-family: 'HelveticaNeueLTStd-Bd';
}

.ibwbt__subc .overlay .wrap p{
text-align: justify;
margin-bottom: 0;
/*font-family: 'HelveticaNeueLTStd-Roman';*/
}

.ibwbt__subc .overlay .wrap p > span{
color:#3e3e3e;
}

/*.ibwbt__mainc .caption{
padding: 5px;
}*/

.ibwbt__mainc .caption p{
text-align: left;
}

.ibwbt__mainc .caption h4{
margin:5px 0 0;
color:#59c3e3;
text-transform: uppercase;
}

.ibwbt__mainc .overlay .wrap .inner{
position: absolute;
left: 0px;
right: 0px;
top: 22px;
bottom: 0px;
height: 44px;
margin: auto;
text-align: center;
transition: all ease-in .3s;
-webkit-transition: all ease-in .3s;
-ms-transition: all ease-in .3s;
-moz-transition: all ease-in .3s;
-o-transition: all ease-in .3s;
}

.ibwbt__mainc:hover .overlay .wrap .inner{
top: 0px;
}

.ibwbt__mainc .overlay .wrap p{
text-align: center;
font-size: 14px;
/*font-family: 'HelveticaNeueLTStd-Roman';*/
}

spriteInCenterTopandHeadingBottom.html

<div class="ltcm">
<span class="image image_3">
</span>
<h4>
Corrosion resistance
</h4>
</div>


.ltcm {
padding: 15px;
text-align: center;
background: #e9e9e9;
color: #333;
cursor: pointer;
transition: all 0.5s ease-in-out;
}

.ltcm:hover {
background: #59c3e3;
color: white;
}

.ltcm h4 {
margin: 0;
/*color: white;*/
}

.ltcm .image {
display: inline-block;
width: 54px;
height: 64px;
background: url('../images/ltcm.png') no-repeat;
background-position: 52%;
}