CODEWITHSUNDEEP
javascripthtmlcssmedia-queries
bc110402307 Syed Zeeshan Haide
bc110402307 Syed Zeeshan Haide

Reputation: 454

How to make overlay effect responsive with image

Responsive Image

enter image description here

Hello ! I made the above image responsive for 320x767 pixel screen resolution. My code is working properly.

However, I have a problem, the shadow effect created on image is not behaving responsively. What i want is as my image become smaller, the shadow should also become smaller with the image height. Or it should behave responsive What should i do for that?

html

<body>
<div  class=" background-img">
    <img src="img/learning.jpg" class="img-responsive">
    <div class="overlay">
    </div>
    </div>
</body>

Css

.background-img{
    max-width: 100%;
    height: auto;

}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: black;
    opacity: 0.5;
}
@media only screen and (min-width:320px) and (max-width:767px){

  .background-img{
        width: 426px !important;
        height: 320px !important ;
    }
    .overlay{
    position:fixed;
    top: 0;
    left: 0;
    width: 30% !important;
    height: 25%!important;
    z-index: 10;
    position: absolute;
    background-color: black;
    opacity: 0.5;
}

Upvotes: 2

Views: 6066

Answers (5)

Yariv Shamash
Yariv Shamash

Reputation: 91

I used CSS-grid like so:

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.img-responsive {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
}

.overlay {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
}

and that worked well on all screen widths.

Upvotes: 0

winresh24
winresh24

Reputation: 687

You can try this code you didn't need query to make it responsive: https://jsfiddle.net/52ms14gf/1/

.background-img .overlay{
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.background-img .overlay {
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
  }

.container img{width:100%;
 display:block;
 }

Upvotes: 2

Rajeev Dixit
Rajeev Dixit

Reputation: 1541

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;
}

Upvotes: 1

Arg0n
Arg0n

Reputation: 8423

Try with this CSS:

.background-img {
    max-width: 100%;
    height: auto;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: black;
    opacity: 0.5;
}

@media only screen and (min-width:320px) and (max-width:767px) {
    .background-img{
        width: 426px !important;
        height: 320px !important ;
    }
}

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Because you are using % in height and width of overlay.

Give a fixed height and width in px

.overlay{
    position:fixed;
    top: 0;
    left: 0;
    width: 100px !important; // set accordinly
    height: 100px !important;// set accordinly
    z-index: 10;
    position: absolute;
    background-color: black;
    opacity: 0.5;
}

width and height declared in % will work according to the height and width of parent. If you don't want the child to change its height and width just define it in px for all screens.

Upvotes: 0

Related Questions