We Blog Weblog

画像の上に文字を重ねる

Web

2024年6月5日

CHEMIST

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はブレンドモードの記事やタイマーの記事で使った「画像の上に文字を重ねる」方法を復習してみようと思います。

画像の上に文字を重ねる

参考:サルワカ|画像の上におしゃれに文字やボタンをのせる方法(CSS)

まず画像と文字を用意します。

<div class="parent">
  <img src="img/sunrise.jpg">
  <p class="child">CHEMIST</p>
</div>

CSSで親要素にposition:relative、子要素にposition:absoluteを設定します。

画像の幅を100%、明るさを0.6にして、文字の色は白(濃度80%)にしました。

文字を縦横中央揃えにしました。

.parent {
  position: relative;
}
.parent img {
  width: 100%;
  filter: brightness(0.6);
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.8);
}

CHEMIST

ホバーしたら文字が現れる

画像にマウスカーソルを乗せたらフィルター(オーバーレイっていうとナウい感じがします)がかかって文字が出てくるようにしてみます。

参考:crnote|【css】画像をホバーした時のエフェクト9選!テキストの表示など

参考:Webdesign&Programming|コピペで使える!画像のマウスオーバー(ホバー)時のエフェクト(文字を表示)18選

① 背景をぼかす

CHEMIST

<div class="parent1">
  <img src="img/sunrise.jpg">
  <p class="child1">CHEMIST</p>
</div>
.parent1 {
  position: relative;
  overflow: hidden;
}
.parent1 img {
  width: 100%;
  filter: none;
}
.child1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin: 0;
  padding: 0;
  opacity: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10vw;
  font-weight: 700;
}
.parent1:hover img {
  filter: blur(3px)brightness(0.6);
}
.parent1:hover .child1 {
  opacity: 1;
}

filter:blurでぼかすことができます。


② 上からストン

CHEMIST

<div class="parent2">
  <p class="child2">CHEMIST</p>
</div>

imgタグではなく背景画像にしました。

文字を縦横中央揃えにしたかったのですがうまくいかなかったので、親要素にdisplay:table、子要素にdisplay:flex、align-items:center、justify-content:centerを設定しました。合ってるのかどうかはわかりません

width:100%にしつつ縦横比を保つ方法(aspect-ratioとかpadding-topとか)を使うとなぜかiPhoneの場合だけ動作しなかったので、heightを設定しています。

.parent2 {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("images/sunrise.jpg");
  position: relative;
  margin: 0;
  padding: 0;
  height: 250px;
  width: 100%;
  display: table;
  overflow: hidden;
}
.child2 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  top: -100%;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding: 0;
  font-size: 10vw;
  font-weight: 700;
}
.parent2:hover .child2 {
  top: 0;
}

top:-100にして、ホバーするとtop:0になるようにしていますね。


③ ドアが閉まるように

CHEMIST

<div class="parent3">
  <p class="child3">CHEMIST</p>
</div>
.parent3 {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("images/sunrise.jpg");
  position: relative;
  margin: 0;
  padding: 0;
  height: 250px;
  width: 100%;
  display: table;
  perspective: 1000px;
  perspective-origin: 0 50%;
}
.child3 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  transform-origin: 0;
  opacity: 0;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding: 0;
  font-size: 10vw;
  font-weight: 700;
}
.parent3:hover .child3 {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 1;
}

perspectiveは遠近感を与えるプロパティのようです。


④ 中央からにゅっと

CHEMIST

<div class="parent4">
  <p class="child4">CHEMIST</p>
</div>
.parent4 {
  display: table;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("img/sunrise.jpg");
  margin: 0;
  padding: 0;
}
.child4 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding: 0;
}
.parent4:hover .child4 {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

scale(0)にして、ホバーするとscale(1)になるようにしていますね。

まとめ

・親要素にposition:relative

・子要素にposition:absolute

・疑似クラスhoverは親要素に設定

・相変わらず縦横中央揃えは難しい

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP