どうも7noteです。画像の上に文字を表示させたい時の方法パート②

※パート①、常に上に文字を乗せる方法はこちら

こんな感じに写真の上に文字が乗ったデザインを作ります。

作り方

作り方は、画像と文字をくくる親要素を作り、position指定で好きな位置に文字をもってきます。

index.html

<div class="onimg">
  <img src="sample.jpg" alt="画像名">
  <p>画像の名前が入るよ</p>
</div>

style.css

.onimg {
  width: 300px;        /* 画像の横幅（自由に指定） */
  height: 225px;
  position: relative;  /* 帯の表示位置の基準とする */
}

.onimg img {
  width: 100%;
  margin: 0;
}

.onimg p {
  color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onimg:hover p {
  opacity: 1;   
}