Overlay size

How can I make the overlay always same size as the image? The overlay is the eye image

2 Replies

put the image in a wrapper, and position absolute the overlay relative to the wrapper.

<div class="image">
  <img src="image.png">
  <div class="overlay">...<div>
</div>

<div class="image">
  <img src="image.png">
  <div class="overlay">...<div>
</div>

.image{
  position: relative;
}
.image > .overlay{
  position: absolute;
  inset: 0; /* top, right, bottom, left : 0, so it has the same size as the parent /*  
}

.image{
  position: relative;
}
.image > .overlay{
  position: absolute;
  inset: 0; /* top, right, bottom, left : 0, so it has the same size as the parent /*  
}

KrazydogOP•11mo ago

It worked! Thank you so much!

Gaming

Programming

Overlay size