Below is the code snippet I am using:
<div class="container">
<img class="img"/>
<div class="underlay"></div>
</div>
The image is a picture of some rotated text by 10 degrees, although the actual image is a standard rectangle. You can view the image here: https://i.sstatic.net/tI1Sg.png
Here is the accompanying CSS:
.container {
position: relative;
width: 100%;
height: 100%;
}
.img {
height: 20vh;
width: auto;
position: absolute;
top: 5vh;
left: 5vh;
}
.underlay {
position: absolute;
top: 5vh;
left: 5vh;
background-color: rgba(0, 0, 0, .5);
width: 100%;
height: 15vh;
transform: rotate(-10deg);
}
Here is what the layout looks like with the above code:
https://i.sstatic.net/VVpmn.png
I am facing an issue in positioning the underlay element perfectly beneath the image. I believe there might be a trigonometry solution for this, but I am uncertain of where to begin. I can manually adjust the underlay to align at certain widths, but resizing the viewport causes it to fall out of alignment, which is puzzling since it is all defined using vh. I suspect the issue may lie in the left positioning, but I am unsure.