<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs" style="background-position: 50%;">
<img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-50"></div>
</div>Mask
This opens a overflow-hidden container which is 50% of the width of the parent and the height is set to the same as the parent, so it will fill the space. The max-w-xs class sets the width to 100% and the max-w-xxx class sets the height to the value x. There is also a fixed class, which sets the position to absolute. The opacity-50 class sets the opacity to 50%.
0 Comments
Add Comment
Log in to add a comment