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,
Related
I have a list of images that are inline. When I hover an image it will show a background with some width and height appear.
My problem is that, when I hover first item for example, the last one or last 2 are going under the first one and I don't want that, I want to stay inline, and if there are no spaces for them in the .content, they must disapppear in order to let the .item:hover create his spaces for showing the background with his width/height.
Also, when I hover last 2 images, its glitching..
This is my code (check on fullscreen)
* {
color: yellow;
}
img {
width: 270px;
height: 300px;
}
.content {
width: 100%;
margin-left: 20px;
margin-top: 20px;
display: inline-flex;
flex-wrap: wrap;
}
.item {
display: inline-block;
background-color: transparent;
width: 250px;
height: 350px;
margin-right: 20px;
transition: 1s ease-in-out;
margin: 10px;
}
.item:hover {
background-color: blue;
width: 1000px;
height: 350px;
}
.item:hover .item-description {
width: 300px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 20px;
position: relative;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}
.item:not(:hover) .item-description {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: unset;
}
<div class="content">
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>
I added flex-wrap: nowrap; on your .content and none of the cards are going to the next line when hovering. Please view the snippet.
* {
color: yellow;
}
img {
width: 270px;
height: 300px;
}
.content {
width: 100%;
margin-left: 20px;
margin-top: 20px;
display: inline-flex;
flex-wrap: nowrap;
}
.item {
display: inline-block;
background-color: transparent;
width: 250px;
height: 350px;
margin-right: 20px;
transition: 1s ease-in-out;
margin: 10px;
}
.item:hover {
background-color: blue;
width: 1000px;
height: 350px;
flex-shrink: 0;
overflow: scroll;
}
.item;hover .item-description {
width: 300px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 20px;
position: relative;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}
.item:not(:hover) .item-description {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: unset;
}
<div class="content">
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>
EDIT: Added flex-shrink: 0; to item:hover to preserve the 1000px width Also, I added overflow: scroll; on the same class so you can scroll horizontally to see the content that overflows.
* {
color: yellow;
}
img {
width: 270px;
height: 300px;
}
.content {
width: 100%;
margin-left: 20px;
margin-top: 20px;
display:flex;
flex-wrap:nowrap;
overflow:auto
}
.item {
display: inline-block;
background-color: transparent;
width: 250px;
height: 350px;
margin-right: 20px;
transition: 1s ease-in-out;
margin: 10px;
}
.item:hover {
background-color: blue;
width: 1000px;
height: 350px;
}
.item:hover .item-description {
width: 1000px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 20px;
position: relative;
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out;
}
.item:not(:hover) .item-description {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
transition: unset;
}
<div class="content" >
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
<div class="item">
<div class="item-img">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">
</div>
<div class="item-description">
test
</div>
</div>
</div>
please help me..i have a problem with the size of my content product.i want to make some grid of food but the grid not at same size..i want fix it to same size and look good on mobile too..plis help me
.product-grid4, .product-grid4 .product-image4 {
position: relative
}
.product-grid4 {
font-family: Poppins,sans-serif;
text-align: center;
border-radius: 5px;
overflow: hidden;
z-index: 1;
transition: all .3s ease 0s
}
.product-grid4:hover {
box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.product-grid4 .product-image4 a {
display: block
}
.product-grid4 .product-image4 img {
width: 100%;
height: auto
}
.product-grid4 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid4 .product-discount-label, .product-grid4 .product-new-label {
color: #fff;
background-color: #16a085;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
line-height: 45px;
height: 45px;
width: 45px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
transition: all .3s
}
.product-grid4 .product-discount-label {
left: auto;
right: 10px;
background-color: #d7292a
}
.product-grid4 .product-content {
padding: 25px
}
.product-grid4 .title {
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
margin: 0 0 7px;
transition: all .3s ease 0s
}
.product-grid4 .title a {
color: #222
}
.product-grid4 .price {
color: #16a085;
font-size: 17px;
font-weight: 700;
margin: 0 2px 15px 0;
display: block
}
.product-grid4 .price span {
color: #909090;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-decoration: line-through;
text-align: left;
vertical-align: middle;
display: inline-block
}
.product-grid4 .add-to-cart {
border: 1px solid #16a085;
display: inline-block;
padding: 10px 20px;
color: #fff;
background: #16a085;
font-weight: 600;
font-size: 14px;
border-radius: 4px;
transition: all .3s
}
#media only screen and (max-width:990px) {
.product-grid4 {
margin-bottom: 30px
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic1.jpg">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Burger Bosku</h3>
<div class="price">
RM 10.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic2.jpg">
</a>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Pasta Special</h3>
<div class="price">
RM 15.00
<span>RM 30.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic4.jpg">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">10%</span>
</div>
<div class="product-content">
<h3 class="title">Pizza Pizzi</h3>
<div class="price">
RM 9.00
<span>RM 10.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic7.jpg">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title">Sweet Food</h3>
<div class="price">
RM 18.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
<hr>
how can i fix this..i think its all about the css but i dont know what i must change.please help me.
If you want all the images to be of the same size, try adding the following to your CSS
.pic-1 {
min-height:100px
}
I have updated the column flex to align equal height. I just set the min-height for your class .product-grid4 .product-image4 img. You can adjust the min-height based on your requirement.
.product-grid4,
.product-grid4 .product-image4 {
position: relative
}
.product-grid4 {
font-family: Poppins, sans-serif;
text-align: center;
border-radius: 5px;
overflow: hidden;
z-index: 1;
transition: all .3s ease 0s;
margin-bottom:30px;
}
.product-grid4:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}
.product-grid4 .product-image4 a {
display: block
}
.product-grid4 .product-image4 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-grid4 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid4 .product-discount-label,
.product-grid4 .product-new-label {
color: #fff;
background-color: #16a085;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
line-height: 45px;
height: 45px;
width: 45px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
transition: all .3s
}
.product-grid4 .product-discount-label {
left: auto;
right: 10px;
background-color: #d7292a
}
.product-grid4 .product-content {
padding: 25px
}
#media (min-width: 501px) {
.product-grid4 .product-image4 img {
min-height: 330px;
}
}
#media (min-width:991px) {
.product-grid4 .product-image4 img {
min-height: 260px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/350x350">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Burger Bosku</h3>
<div class="price">
RM 10.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/550x150">
</a>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Pasta Special</h3>
<div class="price">
RM 15.00
<span>RM 30.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/350x350">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">10%</span>
</div>
<div class="product-content">
<h3 class="title">Pizza Pizzi</h3>
<div class="price">
RM 9.00
<span>RM 10.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/350x150">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title">Sweet Food</h3>
<div class="price">
RM 18.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
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>
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 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/