ボックス要素全体の透明度を指定するには、CSSプロパティ opacity を使います。
opacity
opacity: 値;
[値]：透明度
0.0～1.0の数値で指定します。
0.0で完全に透明となり、見えなくなります。
1.0で完全に不透明となります。
HTML
<div class="opacity"><img src="画像">キャッスルホテル</div>
CSS
.opacity {
opacity: 0.5;
}
表示
キャッスルホテル透明の効果は、指定した要素全体に適用されます。
疑似クラスと組み合わせる
疑似クラスと組み合わせて、ページに一定の効果を出すために使うことができます。
絵にマウスを載せると、絵が浮かび上がるアニメーションの例です。絵の上ではなく、右側でも動作します。
CSS
.opacity:hover {
animation: appear 5s ease-in-out forwards;
}
@keyframes appear {
from {
opacity: 0.1;
}
to {
opacity: 1.0;
}
}
表示
:hover
マウスのカーソルが要素に載った時に起こす動作を定義するのに使う疑似クラスです。
animation
アニメーションを定義するのに使うショートハンド（一括指定）のプロパティです。
実際の動作の定義は、@keyframes [アニメの名前]に書きます。上記では、appearという名前をつけて、opacityを変化させるアニメーションを付けています。