How to vertically align a rotated image caption?

Question

I am trying to align an image caption on the bottom left side of an image container.

Here is a picture of the desired outcome.

This is the HTML/CSS I am working with:

.elementor-image figure {
    position: relative;
}

.elementor-image figure figcaption {
    position: absolute;
    bottom: 0;
    left: -40px;
    transform: rotate(-90deg);
}

<div class="elementor-image">
<figure class="wp-caption">
<img src="https://picsum.photos/200/300">                                           
<figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
</figure>
</div>

There are two problems with my code:

1. The rotated text does not start from the bottom left-hand corner.
2. Applying left: -40px doesn't always align the text with the image (sometimes it overlaps on top of the image).

Here is another screenshot illustrating the problem.

I hope I have explained myself correctly, I have been banging my head with this, so I would really appreciate your input and thoughts. Thanks!

Answer 1

Simply consider transform-origin:bottom left;

.elementor-image figure {
  position: relative;
}

.elementor-image figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin:bottom left;
}

img {
 display:block; /* to avoid white space and have a perfect alignment */
}

<div class="elementor-image">
  <figure class="wp-caption">
    <img src="https://picsum.photos/200/300">
    <figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
  </figure>
</div>