縦書きの文字を写真の左上・左中・左下・右上・右中・右下に配置します。
デモページはこちら

以下のhtml構造で確認します。

<p>テキスト左上</p>
<div class="div-parent">
  <p class="text style01">Flower garden</p>
  <figure class="figure"><img src="./img/flower.jpg" alt="" class="image"></figure>
</div>

<p>テキスト左中</p>
<div class="div-parent">
  <p class="text style02">Flower garden</p>
  <figure class="figure"><img src="./img/flower.jpg" alt="" class="image"></figure>
</div>

<p>テキスト左下</p>
<div class="div-parent">
  <p class="text style03">Flower garden</p>
  <figure class="figure"><img src="./img/flower.jpg" alt="" class="image"></figure>
</div>

<p>テキスト右上</p>
<div class="div-parent">
  <p class="text style04">Flower garden</p>
  <figure class="figure"><img src="./img/flower.jpg" alt="" class="image"></figure>
</div>

<p>テキスト右中</p>
<div class="div-parent">
  <p class="text style05">Flower garden</p>
  <figure class="figure"><img src="./img/flower.jpg" alt="" class="image"></figure>
</div>

<p>テキスト右下</p>
<div class="div-parent">
  <p class="text style06">Flower garden</p>
  <figure class="figure"><img src="./img/flower.jpg" alt="" class="image"></figure>
</div>

CSSはpositionとtransformの組み合わせでテキストを配置します。下寄せの場合はtransform-origin: right bottomにするのがポイントです。

.div-parent {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 1em;
}

.text {
  font: normal 400 24px / normal "Oooh Baby", cursive;
  letter-spacing: 0.1em;
  white-space: nowrap;
  position: absolute;
}

//テキスト左上
.style01 {
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: rotate(90deg);
  padding-top: 5px;
}

//テキスト左中
.style02 {
  top: 50%;
  left: 0;
  transform-origin: top left;
  transform: rotate(90deg) translateX(-50%);
  padding-top: 5px;
}

//テキスト左下
.style03 {
  bottom: 0;
  right: 100%;
  transform-origin: right bottom;
  transform: rotate(90deg) translateY(100%);
  padding-top: 5px;
}

//テキスト右上
.style04 {
  top: 0;
  left: 100%;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  padding-bottom: 5px;
}

//テキスト右中
.style05 {
  top: 50%;
  left: 100%;
  transform-origin: top left;
  transform: rotate(90deg) translate(-50%, -100%);
  padding-top: 5px;
  padding-bottom: 5px;
}

//テキスト右下
.style06 {
  bottom: 0;
  right: 0;
  transform-origin: right bottom;
  transform: rotate(90deg);
  padding-bottom: 5px;
}

transformを複数指定する場合、指定した順番に変形していきます。translateとrotateの順番を逆にすると意図した場所に配置できなくなるため、注意が必要です。