画像の上に文字を重ねる
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は親要素に設定
・相変わらず縦横中央揃えは難しい