JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<!-- http://kenwatanabe.info/library/test_img_01.jpg -->

<div style="height:500px;">


<figure>
  <img src="http://kenwatanabe.info/library/test_img_01.jpg" />
  <figcaption><span>Lorem ipsum dolor sit amet </span>
  </figcaption>
</figure>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
figure {
  display: inline-block;
  background: #ffa2df;
  position: relative;
}
figure img {
  width: auto;
  height: 100%;
}
figcaption {
  background: red;
  opacity:0.4;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding:0;
  margin:0;
}
figcaption span {
  vertical-align: baseline;
  position: absolute;
  bottom: 0;
  left: 0;
  padding:20px;
  white-space: nowrap;
  transform-origin: top left;
  transform: translate(0%, 100%) rotate(-90deg);
  color: black;
}