When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle.
Something resembling this example:
https://i.sstatic.net/fYzVZ.png
I have successfully created a div overlay, but now I need to modify it so that the opaque black backdrop covers everything except for the rectangle. This way, users can see what the final result will look like.
This is my current code setup:
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
max-width: 100%;
height: 100%;
aspect-ratio: 1 / 1.42;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 150px;
border-radius: 0.5rem;
}<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>Specifications
- The rectangle's aspect ratio and size must remain consistent.
- Avoid using hardcoded values or fixed dimensions unless calculated dynamically based on the image. The layout should adapt responsively to various screen sizes.
- Restrictions on changing HTML structure due to use of drag and drop API to adjust the rectangle within the image wrapper by altering its positioning.
- Preference for utilizing CSS or JavaScript solutions rather than additional HTML modifications.
- Exclusion of
object-fit: coveras requirement dictates displaying the complete image in its original proportions.