0
122
VistasBlindside the Borg queen: Image with overlaying element that is absolute positioned above the same area of the image when the image rescales
Sorry if this is not the right way to do it, please feel free to suggest other solutions. I don't care what the text or the blindfolding element is as long as it servers the purpose. Maybe it is possible to do this with an svg but it is way too advanced for me.
I am trying to create a page showing an image with a certain area covered so that the reader can't see it.
Here is my code so far. Not sure how to calculate/recalculate the position of that element based on the new position and size of the picture when the browser window resizes
https://jsfiddle.net/xay5u78s/
<html lang="en">
<head>
<title>Bootstrap Responsive image example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div >
<div >
<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Borg_Queen_2372.jpg" class="img-fluid" style="width:30%" alt="image">
<div class="position-absolute" style="height:30px; background-color: white; top: 25%;left: 13%;"> Covered covered </div>
</div>
</div>
</body>
</html>
Desired effect
Updated fiddle with the solution as suggested by @quentin
https://jsfiddle.net/xay5u78s/1/
1 Respuestas
Responde la pregunta0
Absolutely positioned elements are positioned with respect to the edges of the nearest ancestor element that is positioned (meaning "Has position: anything-but-static").
So set the containing div to position: relative and give it the same dimensions as the image.