Displaying a div on top of a div in css grid while matching the parent's size

swaan12 0
Viewed 26

I am trying to make an overlay animation that will play when you hover over an image. My first step towards that is making sure I can match the overlay to the image, as well as keep it matched with different screen sizes. My current issues are:

  1. I coudn't find a way to make the overlay only fit the parent (container). I thought by default the width: 100%; and height: 100%; would always go to the parent. Instead they are going by the screen size.

  2. The overlays are currently off center, except for the top right. I'm hoping that by making them fit the container rather than the screen that would be resolved though.

If any more information is needed or pictures would help, I can revise this post to include.

Thank you guys for any and all help!

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 55vh;
  grid-auto-columns: 41vw;
  background-color: #eef7e4;
  overflow: hidden;
}
.container {
  align-items: center;
  display: flex;
  overflow: hidden;
}
.image {
  object-fit: cover;
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e32827;
  opacity: 80%;
}
<div class="wrapper">
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
<div>

*note the imagefile.jpg was put in place of my actual images for the website

css html
3 Answers

because if you use position: absolute, then the parent element is no longer a container, so you can add position: relative in the container class, so that the container can be the parent of the overlay class

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 55vh;
  grid-auto-columns: 41vw;
  background-color: #eef7e4;
  overflow: hidden;
}
.container {
  align-items: center;
  display: flex;
  overflow: hidden;
  position: relative;
}
.image {
  object-fit: cover;
  overflow: hidden;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e32827;
  opacity: 80%;
}
<div class="wrapper">
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
          <div class="overlay"></div>
     </div>
<div>

arsyaadi0

I think in this case you just need to add position: relative to the .container, so that each .overlay will be 100% to the .container. Another way to achieve that is by adding top: 0; right: 0; bottom: 0; left: 0 to the .overlay

Damzaky0

maybe u can try to use that hover animation to the container like .container:hover .overlay{ //overlay animation }

Sunny160
Related