I have a multi-item bootstrap carousel and I want to put text in certain parts of the images in this carousel. Here is a CodePen of what I have. Currently, the text will show only when the image is the first one listed. As you can see when you go right once the streamer text appears on the first image, then if you proceed to go back left the text disappears and stays only on the first image.
HTML:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
<div class="image-content">Streamer</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
<div class="image-content">Streamer</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
CSS:
.multi-item-carousel {
width: 100%;
height: 100%;
font-size: 25px;
}
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
width: 5%;
background-image: none!important;
filter: none!important;
outline: none!important;
border: 0;
}
.container {
width: 100%;
}
.carousel {
padding: 20px 70px;
}
.image {
border: 0;
outline: none;
background: transparent;
}
.image-content {
top: 5px;
left: 21px;
position: absolute;
color: rgb(225, 225, 225);
font-size: 11px;
}
body {
background-color: transparent;
}
If you want the text to appear on certain images, you must put the div containing the the text inside of the col in which you are placing your image. Check if this is what you are trying to acheive.
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel {
width: 850px;
height: 150px;
font-size: 25px;
}
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
width: 5%;
background-image: none!important;
filter: none!important;
outline: none!important;
border: 0;
}
.container {
width: 100%;
}
.carousel {
padding: 20px 70px;
}
.image {
border: 0;
outline: none;
background: transparent;
}
.image-content {
top: 5px;
left: 21px;
position: absolute;
color: rgb(225, 225, 225);
font-size: 11px;
}
body {
background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
<div class="image-content">Streamer</div>
</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
<div class="image-content">Streamer</div>
</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
Please try using put text separate div to col-xs-4 div it will be display you content each time like:
<div class="item active">
<div class="col-xs-4">
<a href="#1">
<img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
</a>
<!-- here-->
<div class="image-content">Streamer</div>
<!-- -->
</div>
<!--<div class="image-content">Streamer</div>-->
</div>
Related
I have made a gallery images section using gallery isotope filter but the gallery images are overflowing in the testimonial section. I have used simple HTML and CSS but it is not working. How do I solve this?
This is a image gallery using isotope effect and the lower section is a testimonials sections with a carousal. As far I have tried this is not working. The gallery images are overflowing in the testimonials sections.
#gallery {
padding: 40px 0;
height: 100vh;
width: 100%;
overflow: hidden;
}
.portfolio-menu {
text-align: center;
margin-bottom: 20px
}
.navigation a {
display: inline-block;
margin: 0;
list-style: none;
padding: 10px 15px;
border: 1px solid #8cd2ed;
cursor: pointer;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
text-decoration: none;
}
.navigation a:hover {
background: #8cd2ed;
color: #ffffff;
}
.portfolio-item {
width: 100%;
}
.portfolio-item .item {
float: left;
margin-bottom: 15px;
margin-right: 20px;
}
.harley {
height: 268px;
width: 350px;
}
li.active {
background: #8cd2ed;
color: #ffffff;
}
#testimonials {
text-align: center;
background-color: #b1e8ed;
color: #fff;
}
#testimonials .carousel-item {
padding: 7% 15%;
}
#testimonials .testimonials-image {
width: 20%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #b1e8ed;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
<section id="gallery">
<div class="container">
<h1>Gallery</h1>
<div class="portfolio-menu">
<div class="navigation">
All
Bike
Engine
Custom
</div>
</div>
<div class="portfolio-item">
<div class="item engine">
<img class="harley" src="img/gallery1.jpg">
</div>
<div class="item custom">
<img class="harley" src="img/gallery2.jpg">
</div>
<div class="item custom">
<img class="harley" src="img/gallery3.jpg">
</div>
<div class="item bike">
<img class="harley" src="img/gallery4.jpg">
</div>
<div class="item engine">
<img class="harley" src="img/gallery5.jpg">
</div>
<div class="item custom">
<img class="harley" src="img/gallery6.jpg">
</div>
<div class="item bike">
<img class="harley" src="img/gallery7.jpg">
</div>
<div class="item bike">
<img class="harley" src="img/gallery8.jpg">
</div>
<div class="item engine">
<img class="harley" src="img/gallery9.jpg">
</div>
<div class="item bike">
<img class="harley" src="img/gallery10.jpg">
</div>
</div>
</div>
</section>
<section id="testimonials">
<div id="testimonials-carousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>This is the best bike shop i have ever encountered and love it.</h2>
<img class="testimonials-image" src="img/testimonial1.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">Best custom made bikes i have seen so far in the world and trust me i am a bike fanatic.</h2>
<img class="testimonials-image" src="img/testimonial2.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section id="press">
<img class="press-logo" src="img/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="img/tnw.png" alt="tnw-logo">
<img class="press-logo" src="img/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="img/mashable.png" alt="mashable-logo">
</section>
The expected result I should have is different section with the carousal part and different section with the testimonial part.
Gallery images overflowing in the Testimonial section due to height. height is applied to #gallery.
You should remove height from #gallery. Once the height is removing then gallery and testimonial sections display as a different section.
Thanks,
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'm working on bootstrap 2.3.2 and i want to position an image at the bottom of a viewport div, but unable to do so.i want that the secondlayer image will remain at the bottom of viewport div in every device. How can i achieve this.
Here is my code for carousel:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Here is my CSS:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {margin-top:175px;}
To get the secondlayer div positioned at the bottom of the viewport, it has to be positioned absolutely. See the revised code of your example:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.secondlayer img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
</div>
</div>
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
I am trying to place some text in the center-bottom of a div which contains an overlay and image.
But how can i achieve this?
HTML code:
<div class="container">
<div class="row team-images">
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
CSS code:
.team-images .team-item {
position: relative;
}
.team-images img {
width: 100%;
height: 100%;
margin: 0 0 15px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
Here is a complete example of whats created so far: https://jsfiddle.net/prp794Lb/1/
How about this?
<div class="container">
<div class="row team-images">
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Lots and lots and lots and lots and lots of text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-sm-3">
<div class="team-item">
<div class="team-text">Text here</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.team-images .team-item {
position: relative;
}
.team-images img {
width: 100%;
height: 100%;
margin: 0 0 15px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
.team-item .team-text {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
}
https://jsfiddle.net/wL5Lf5se/3/
Go for span inside overlay and style it like this:
Demo
.team-images .team-image-overlay span {
display:block;
text-align:center;
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:0;
transition: all .3s ease;
color:#333;
}
.team-images .team-image-overlay:hover span {
display:block;
text-align:center;
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:1;
}
I am trying to control some responsive images placed in a grid.
Unfortunately 2 annoying things occur when the viewport is changed in width:
The images which starts out as 4 in a row, quickly becomes 1 in a row even though there is space enough for 2-3 in the viewport.
The images are not positioned in center when 1 in a row.
HTML
<section>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2>Image test</h2>
<hr class="line-color"></hr>
</div>
</div>
<div class="row team-images">
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>John Doe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>Moe Joe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>Jimbo Joe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>Jimmy Joe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</section>
CSS
body {
margin: 10px;
}
.team-images img {
max-height:300px;
width:auto;
}
.team-text {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
background-color:rgba(0, 0, 0, 0.4);
}
.team-text h3 {
margin-top:5px;
font-weight: 300;
margin-bottom: 0;
text-transform: none;
}
.team-text h4 {
margin-bottom:5px;
margin-top: 0;
padding-top: 0;
font-weight: 200;
font-size: 1em;
text-transform: none;
}
.team-item {
position: relative;
display:inline-block;
margin-bottom:10px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
DEMO: https://jsfiddle.net/DTcHh/7189/
On your columns, you only specified col-md-3 which will only trigger during medium to large resolutions.
You can set instead col-md-3 col-sm-3 or just col-sm-3 so it will also trigger on smaller res.
Regarding the images not positioned center, you can make it by setting text-align:center on their container.
.team-images > div {
text-align:center;
}
Working fiddle : https://jsfiddle.net/1L4fgdf5/3/
In response to your comment below, if you don't want to use scaffolding use media queries on css intead.
#media (min-width: 992px) and (max-width: 1199px) {
.team-images .col-md-3 {
width: 50%;
}
}
Working fiddle: https://jsfiddle.net/da9b30fn/