0
210
ViewsImage div overlay and preserving position during resize
I am placing a div on top of an responsive image, like this:
When I resize, I lose the position of the div tag, like this:
How can I resize this overlay div so that its size is proportionally resized and its position is maintained, when the screen size changes?
·
Juan Pablo Isaza
1 answers
Answer question0
Wrap the image in a container with percentage width and create a square using percentage and padding value. After that align the square using position: absolute and percentage value.
.container {
position: relative;
}
.lotus-image {
width: 100%;
}
.box {
position: absolute;
top: 30%;
right: 20%;
width: 30%;
padding-bottom: 30%;
border: 4px solid red;
color: white;
}
.box-content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}<div class="container">
<img src = "https://img.freepik.com/free-photo/blossoming-pink-lily-flowers-swamp-natural-background_548832-3024.jpg?size=626&ext=jpg" class="lotus-image" />
<div class="box">
<div class="box-content">
<span>Hello</span>
</div>
</div>
</div>
·
Juan Pablo Isaza
Report
Answer question