Currently, I am exploring how to creatively position a textarea on an image. The idea is to overlay the text on the image within the textarea and then use a slider to adjust the vertical position of the text as a percentage of the image height. For instance, if the slider is set at 100%, the text should align with the bottom of the image while staying within its boundaries.
img {
width: 510px;
height: 720px;
}
.wrapper {
position: relative
}
label {
position: absolute;
left: 48px;
top: 12px;
}
textarea {
background: transparent;
outline: none;
border: none;
resize: none;
line-height: 122%;
letter-spacing: -0.01em;
min-height: 100px;
overflow-y: hidden;
}<div>
<input type="range" min="1" max="100" value="1" id="range">
</div>
<div class="wrapper">
<img src="https://image.shutterstock.com/image-photo/still-life-glass-objects-on-600w-1731010606.jpg"/>
<label>
<textarea>Lorem ipsum lorem ipsum lorem ipsum lorem</textarea>
</label>
</div>I have been brainstorming various approaches for achieving this effect, but so far nothing has stood out. Any suggestions or examples that can be achieved using vanilla JavaScript would be greatly appreciated.