Image Overlay on Responsive Sized Images Bootstrap

Image overlay on responsive sized images bootstrap

Add a class to the containing div, then set the following css on it:

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relative is required on a parent element of children with position: absolute for the children to be positioned in relation to that parent.

DEMO

Keep responsive image overlay the same size as image

#img-wrapper {  background: yellow;  box-sizing:border-box;  width: 50%;}
img {  z-index: 1;  width: 100%;  opacity: 0.5;  vertical-align: middle;  border: 1px solid black;}

<div id="img-wrapper"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="Sample Image"></div>

How to adjust overlay according to image size with bootstrap

Demo

.team-item {
    display:inline-block;
    background:red;
    margin-bottom:10px;
}

This will solve your problem :)

How to make overlay effect responsive with image

We usually apply a z-index declaration to the popout div using a slightly higher value (10 as you are using), along with a position: relative; declaration that causes the z-index value to be applied.
Here's the code change if you're following the way I understood:

 @media only screen and (min-width:320px) and (max-width:767px){

 .background-img{
    position:relative;
    max-width: 100%;
    height: auto;
 }
 .overlay {
   position: relative;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   z-index: 10;
   background-color:black;
   opacity: 0.5;
}

Twitter Bootstrap Carousel with overlaying responsive image

YOu can do the following : Jsfiddle Jsfiddle with resized overlay

Jsfiddle in browsercheck in browser

Edit: I would suggest you to use different sizes of images to cater different screen , that way you wont loose the quality and even the ratio can be fixed according to your choice . Than load those images with media queries , so with every different screen you are serving them resized image which will fit well on to your carousal .

<div class="container">
 <div class="carousel slide">
  <div class="carousel-inner">
    <div class="overlay"></div>
    <div class="item active">
        <a href=""><img src="http://www.placehold.it/900x500&text=One" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a>
    </div>
 </div>
 <a class="carousel-control left" href=".carousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href=".carousel" data-slide="next">›</a>
  </div>
 </div>

In css use the following :

.overlay {
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }
     @media (min-width: 768px) and (max-width: 979px) {
      .overlay{

         width:50%;
        height:50%;
  }    
 }

  @media (max-width: 767px) {
     .overlay{

  width:50%;
  height:50%;
  }

  }
@media (max-width: 480px) {
   .overlay{
   width:50%;
  height:50%;

  }
}

bootstrap responsive images with shadow+text overlays and another overlay when hover

You could position your overlay absolutely and move it out of the way with transform: translateY(). On hover you move it back in. Is this the effect you wanted to achieve?

Here is a CodePen to play with: https://codepen.io/Sixl/pen/bOdwaZ?editors=1100

.product-item {  position: relative;}
.product-container {  background: #000;  position: relative;  width: 100%;  overflow: hidden;}
.product-container .product-description {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  display: flex;  justify-content: center;  align-items: center;  color: #fff;  background-color: rgba(0, 0, 0, 0.6);  text-align: right;  padding: 0.2em 0.4em 0.2em;  -webkit-transform: translateY(101%);  transform: translateY(101%);  transition: -webkit-transform 200ms ease-in-out;  transition: transform 200ms ease-in-out;  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;}
.product-container:hover .product-description {  -webkit-transform: translateY(0);  transform: translateY(0);}
.product-img {  display: block;  max-width: 100%;  height: auto;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">  <div class="row">    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-1">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=20">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-2">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=21">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-3">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=22">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-4">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=23">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-5">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=24">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-6">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=25">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>  </div></div>

Bootstrap 4 image overlay issues

The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).

   <div class="card bg-dark text-white">
        <img class="card-img img-responsive" 
        src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
        <div class="card-img-overlay d-flex align-items-center">
            <div class="row">
                <div class="text-left col-lg-3 col-sm-6">
                    <h2 class="card-title ">H2 Locations Headline</h2>
                    <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <div class="">
                        <a href="#" class="btn btn-danger  btn-lg ">CTA to Our Locations</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Use d-flex align-items-center on the card-img-overlay to vertically center the row.

https://www.codeply.com/go/eRpRZj9Z8M

Bootstrap (CSS) - Overlay One Img over another using responsive design

Here's how to put a picture above another picture: http://codepen.io/ruchiccio/pen/ZWZEEy

More than that I can't help because you haven't supplied normal paths to images so we can't see what should go onto what. Maybe provide a screenshot of what you'd like.

<div id="container">
 <img id="pic1" src="http://placehold.it/350x150">
 <img id="pic2" src="http://placehold.it/150x50">
</div>

#container {
  position: relative;
}

#pic2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

---

Related Topics