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!

HTML:

<div >
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>

<div>

CSS:

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

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

CodePudding user response：

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 >
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
     <div >
        <img  src="imagefile.jpg">
          <div ></div>
     </div>
<div>

CodePudding user response：

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

CodePudding user response：

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