Image Overlay with Pseudo Class in Tailwind
I Am Trying to Add Image Overlay of Static Color Using Tailwindcss. If You Inspect the Browser the Parent Div Is Taking the Size of the Image Only, So Ideally...
I am trying to add image overlay of static color using tailwindcss. If you inspect the browser the parent div is taking the size of the image only, so ideally the before pseudoclass should take the parent's height and width if I use w-full or h-full. Since it's also child of the div. But that is not the case.
I tried it with only css thinking I might be making mistake in tailwindcss (Since I just started using it) but the result was the same.
<script src=""></script>
<div class="iniline before:content-{} before: inline before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-full before:w-full before:bg-fuchsia-600 before:opacity-30">
<img src="//" alt="Image" class="relative z-0" />
</div>
1 Answer
Consider making the <div> a position parent by applying position: relative via the relative class. To "shrink-wrap" the width to the image, you could apply width: max-content to the <div> via w-max.
<script src=""></script>
<div class="relative w-max before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-full before:w-full before:bg-fuchsia-600 before:opacity-30">
<img src="//" alt="Image" class="relative z-0" />
</div>David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
