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>