javascript - How to make overlay effect responsive with image

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 bee smaller, the shadow should also bee 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;
}

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

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

Share Improve this question edited May 11, 2016 at 7:59 asked May 11, 2016 at 7:08 bc110402307 Syed Zeeshan Haide 45411 silver badges33 bronze badges

remove position:fixed an absolute will do and set your width and height to 100% also add position:relative to background-img – winresh24 Commented May 11, 2016 at 7:13
try using position as relative. – Rajeev Dixit Commented May 11, 2016 at 7:13
Possible duplicate of Image overlay on responsive sized images bootstrap – Karthikeyan sundaramoorthi Commented May 11, 2016 at 7:15
@winresh24 Which width and height should be 100%? And in media query background-image needs to be set at position relative? – bc110402307 Syed Zeeshan Haide Commented May 11, 2016 at 7:17
wait I will make a fiddle for you – winresh24 Commented May 11, 2016 at 7:23

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

You can try this code you didn't need query to make it responsive: https://jsfiddle/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;
 }

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

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

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.

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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744584622a4582240.html

javascript - How to make overlay effect responsive with image - Stack Overflow

5 Answers 5

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to make overlay effect responsive with image - Stack Overflow

5 Answers 5

相关推荐