KPC
Kevin Powell - Community•5mo ago
Krazydog

Overlay size

How can I make the overlay always same size as the image? The overlay is the eye image
No description
2 Replies
MarkBoots
MarkBoots•5mo ago
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 /*  
}
Krazydog
Krazydog•5mo ago
It worked! Thank you so much!
Want results from more Discord servers?
Add your server
More Posts
How can I expand each box wider with flex-grow?https://codepen.io/mycenas/pen/NWJodRE I have created 4 rows of 3 boxes with flex, and on click a flAdding data-bs-slide-toHi everyone, was wondering on how I can add a data-bs-slide-to-(number increases by one everytime I Looking for wp plugin suggestionsGreetings, I am looking for suggestions for an assessment tool plugin. Essentially a survey that genHow can I open any phone on my screen while coding ?Can someone help me to open any phone while coding , like I wanna see a preview while coding and theFlexbox- flex-start 1 element, but space the rest?How would this be done? just out of curiosity.. I'm messing around with a page and I basically want i want make scroll effectI want to make this scroll effect using html, css, js, can anyone guide me?