I have an all css and bootstrap hover effect, the overlay tags are all encased in a div class but all of them hover at the same time. all three have separate bootstrap grids and the effect even extends to the empty space in between the photos. any help would be appreciated thank you.
HTML:
<div class="container">
<div class="row">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">BROWSE OUR CARDS</h2><br>
</div>
<div class="col-md-4 col-xs-12">
<a href="cards/list.php?tn=beauty">
<img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-beauty-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">BEAUTY</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-xs-12">
<a href="cards/list.php?tn=health">
<img class="img-responsive" src="img/_stock_mwc_health.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-health-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">HEALTH</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-xs-12">
<a href="cards/list.php?tn=wellness">
<img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-wellness-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">WELLNESS</div>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f08300;
}
.container:hover .overlay {
opacity: 1;
}
.overlay-content {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.spacer {
margin: 20px 0px 20px 0px;
}
here is my js fiddle for more info, i just added random placeholder images: http://jsfiddle.net/cnkgqhdw/1/
Don't do the hover on the container, do it on the columns! Just change .container:hover to .col-md-4:hover.
To keep the space correct, you can use bootstrap own spacing system. In your case, you can put a default margin around by adding the class mx-3 to the overlay element.
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: #f3a64c;
}
.col-md-4:hover .overlay {
opacity: 1;
}
.overlay-content {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.exact-center {
text-align: center;
vertical-align: middle;
}
.spacer {
margin: 20px 0px 20px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">BROWSE OUR CARDS</h2><br>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
<div class="overlay mx-3">
<div class="overlay-content">
<img src="img/icon-beauty-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">BEAUTY</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_health.jpg">
<div class="overlay mx-3">
<div class="overlay-content">
<img src="img/icon-health-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">HEALTH</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
<div class="overlay mx-3">
<div class="overlay-content px-3">
<img src="img/icon-wellness-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">WELLNESS</div>
</div>
</div>
</div>
</div>
</div>
You have it setup to :hover on the .container element, which is the entire row. Need to add a class to your card and do .card:hover
You are hovering on the whole container. So that's why everything gets the hover state.
You should add a class to the
<a class="item" href="">
and hover that:
.item:hover {
//styling here
}
Related
2 image appear in same time, up and down.
I want hover image display none.
Hover image is appear below primary image.
Primary image is hide when hover.
Seems like dont work. and really need help on this.
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-top" src="images/True Blue Asia.jpg"/>
<img class="card-img-top" src="images/Asia Bagus.jpg"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
<div class="card">
<img src="/image_displayed_as_default" class="hover-hidden"/>
<img src="/image_displayed_when_hover" class="hover-only"/>
</div>
.card img {
opacity: 1;
transition: opacity 200ms;
}
.card:hover img.hover-hidden,
.card:not(:hover) img.hover-only {
opacity: 0;
}
You are looking for this
Pure CSS solution
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
<img id="aks" src="http://dummyimage.com/100x100/000/fff"/>
Your code solution
Issue i you are not hide second image initially
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
.card a .card-img-below{
display: none;
}
.card a:hover .card-img-below {
display: block;
}
a{
display:block;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-above" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class="card-img-below" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
Change the image url
For my portfolio site I am making I have it so when you hover over the portfolio image it overlays the title and category. My problem is the overlay section is picking up the margin and padding for the spacing of the images in the grid. I cant get it to be whatever the portfolio image size is without removing the gutter between the images.
Example below:
Not sure how to fix this and any help would be appreciated.
.thumbnail {
padding: 0px !important;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 0px;
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
padding: 0px 0px 0px 0px;
transition: .5s ease;
background-color: rgba(136, 24, 38, 0.6);
}
.thumbnail:hover .overlay {
opacity: 1;
height: 100%;
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<section id="work" class="bg-grey">
<div class="container-fluid text-center">
<h2>MY WORK</h2>
<!--<h4>What we have created</h4>-->
<div class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
When you use a absolute positioned element, always set the respective relative, position element. Let me know if you have any issues with the output.
The only CSS change is to the below class. Where I have added the property position: relative.
.thumbnail {
padding: 0px !important;
position: relative;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
So your absolute positioned div with class overlay will be positioned with respect to the div with class thumbnail
.thumbnail {
padding: 0px !important;
position: relative;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 0px;
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
padding: 0px 0px 0px 0px;
transition: .5s ease;
background-color: rgba(136, 24, 38, 0.6);
}
.thumbnail:hover .overlay {
opacity: 1;
height: 100%;
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="work" class="bg-grey">
<div class="container-fluid text-center">
<h2>MY WORK</h2>
<!--<h4>What we have created</h4>-->
<div class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
I have set of images and when hovered the image will fade(whitish fade) its color. But what I want is for it to be pink (pinkish fade) with an opacity of 0.5. I can't make it change its color, what I did is just the fading (whitish fade) of image when hovered.
.img-overlay {
position: relative;
}
.img-overlay img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.img-overlay:hover img {
opacity: 0.5;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-overlay:hover .middle {
opacity: 1;
}
<div class="wrappingimages">
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
</div>
Since filters are not compatible with all the browsers, alternatively you might want to set up your image as a background and create an overlay layer, which will only display on hover. It would be something like this:
<div class="box overlay red" style="background-image: url('https://picsum.photos/200?image=187');">
<h1>Pasta</h1>
</div>
<div class="box overlay blue" style="background-image: url('https://picsum.photos/200?image=378');">
<h1>Pasta</h1>
</div>
<div class="box overlay green" style="background-image: url('https://picsum.photos/200?image=339');">
<h1>Pasta</h1>
</div>
<div class="box overlay orange" style="background-image: url('https://picsum.photos/200?image=329');">
<h1>Pasta</h1>
</div>
body {
text-align: center;
}
.box {
width:100px;
height:100px;
border:1px solid grey;
display: inline-block;
vertical-align: top;
margin-top: 10px;
background-image: url(http://lorempixel.com/output/food-q-c-100-100-10.jpg);
position: relative;
}
.overlay {
position: relative;
}
.overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
}
.overlay:hover:before{
display: block;
}
.red:before {
background-color: rgba(255,0,0,0.5);
}
.blue:before {
background-color: rgba(0,0,255,0.5);
}
.green:before{
background-color: rgba(0,255,0,0.5);
}
.orange:before {
background-color: rgba(255,153,0, 0.5);
}
.box * {
position: relative;
/* hack */
}
h1 {
color:white;
}
You can then play around with colors and opacity.
Check out how it would look on this codepen.
You can use a combination of different css filters to achieve the results you're looking for. I made an example by fiddling around and tweaking the numbers until it looked pinkish.
.img-overlay {
position: relative;
}
.img-overlay img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.img-overlay:hover img {
-webkit-filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-overlay:hover .middle {
opacity: 1;
}
<div class="wrappingimages">
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
</div>
.img-overlay:hover:after img {background:pink; opacity:0.5;}
the topic is saying it - my problem is following:
I want to have a color overlay when I hover over my picture
the text on image should be visible before and after hovering without any changes
Issue: when I hover over the text, the color hover overlay disappears (it's just visible when I move around in the Div without moving it over the text)
I tried some other solutions, like pseudo classes, but I didn't make it work...thank ya'll!
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.text_z{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 999;
}
.image_box_one img {
width: 100%;
display: block;
height: auto;
}
.image_box_one {
background: rgba(29, 106, 154, 0.72);
padding:0px;
margin:0px;
}
.image_box_one img:hover {
opacity: 0.5;
}
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
</div>
</div>
When you hover over the text, you're no longer hovering the img. Change your selector to .image_box_one:hover img so that when you hover over anything in an .image_box_one, it will apply styles to the img
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.text_z{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 999;
}
.image_box_one img {
width: 100%;
display: block;
height: auto;
}
.image_box_one {
background: rgba(29, 106, 154, 0.72);
padding:0px;
margin:0px;
}
.image_box_one:hover img {
opacity: 0.5;
}
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
<div class="col-lg-4">
<div class="image_box_one">
<img src="http://placehold.it/1332x1017" />
<div class="text_z">Hover over Me <br>Overlay Disappears</div>
</div>
</div>
</div>
</div>
I'm having an issue with the way I have centered my links and the way I want to links to scale on hover. When I hover over the links the transition is effecting how I have centered the links as well as the scale of them. It moves them to the side and scales them but I want to keep them centered.
.position{
position: relative;
}
.absolute_img_links:link, .absolute_img_links:visited{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
background-color: #ff6633;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 1.4em;
padding: 0.5em;
transition: transform:scale 1s;
}
.absolute_img_links:hover{
transform: scale(1.1);
}
<div class="container" id="bottom_col_margin">
<div class="row">
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/testimonials_img.jpg">
<span class="text_center">Customer Testimonials</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/delivery_img.jpg">
<span class="text_center">Free Delivery</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/help_guides_img.jpg">
<span class="text_center">Help & Guides</span>
</div>
</div>
</div>
when you write the code for :hover, and you use transform: , if you don't keep the initial translate(-50%,-50%) and only use scale(1.1) it will understand like the translate becomes 0 . so you need to keep the initial translate values also in the hover state . so the code will become
transform:translate(-50%,-50%) scale(1.1)
.position{
position: relative;
}
.absolute_img_links:link, .absolute_img_links:visited{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
background-color: #ff6633;
transform: translate(-50%,-50%);
color: #ffffff;
font-size: 1.4em;
padding: 0.5em;
transition: 3s;
}
.absolute_img_links:hover{
transform: translate(-50%,-50%) scale(1.1);
}
<div class="container" id="bottom_col_margin">
<div class="row">
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/testimonials_img.jpg">
<span class="text_center">Customer Testimonials</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/delivery_img.jpg">
<span class="text_center">Free Delivery</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/help_guides_img.jpg">
<span class="text_center">Help & Guides</span>
</div>
</div>
</div>