How to place sibling img/div on top of each other with identical size if parent has padding-CodePudding

I'd like to have an image with a div that covers the image exactly. I can get the div to overlay the image by using position: relative in the parent and position: absolute for the div, but background-color fills out the padding in the parent so they aren't overlayed properly.

Here's a snippet that demonstrates the problem.

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.overlay {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  left: 0;
  top: 0;
  opacity: 0.2;
}

<div >
  <img  src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div ></div>
</div>

I'm able to get it pretty close with some calc()'s to subtract the padding. This almost works, but the div fills out a little too much at the bottom. I'd like to not have a bunch of hardcoded values for padding anyway, so I wouldn't really like this solution even if it did work entirely.

Here's a snippet that shows the calc() approach.

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.overlay {
  position: absolute;
  background-color: red;
  width: calc(100% - 2 * 10px);
  height: calc(100% - 2 * 10px);
  border-radius: 13px;
  left: 10px;
  top: 10px;
  opacity: 0.2;
}

<div >
  <img  src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div ></div>
</div>

CodePudding user response：

This snippet does things a slightly different way, putting the img inside the overlay div and putting the actual green, lower opacity overlay as the overlay div's after pseudo element.

This way you don't have to build in any knowledge of the parent's padding.

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
  background: red;
  height: fit-content;
}

.image {
  width: 100%;
  border-radius: 13px;
  top: 0;
  left: 0;
}

.overlay {
  position: relative;
  padding: 0;
  width: fit-content;
  height: fit-content;
}

.overlay::after {
  content: '';
  position: absolute;
  background-color: green;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  left: 0;
  top: 0;
  opacity: 0.2;
  padding: 0px;
}

<div >
  <div > <img  src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156"></div>
</div>

CodePudding user response：

When using HTML5, browser adds some padding to the bottom of the img tag. This can be avoided by making the image a block element. So just adding display: block to class .image and then it good.

And btw, to define witdh/height of an absolute element, beside calc() you can also define 4 values top, right, bottom, left of it.

:root {
  --custom-padding: 10px;
}

.parent {
  position: relative;
  padding: var(--custom-padding);
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  display: block;
}

.overlay {
  position: absolute;
  background-color: red;
  border-radius: 13px;
  bottom: var(--custom-padding);
  right: var(--custom-padding);
  left: var(--custom-padding);
  top: var(--custom-padding);
  opacity: 0.2;
}

<div >
  <img  src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div ></div>
</div>