半透明にするCSSの書き方

はじめに

様々なレイアウトに悩まされデザイン性皆無な僕は頭がパンクしそうになり、
今にも発狂しそうです。
　本日はレイアウトの少しのメモをしたいと思います。

ソースコード

css

img:hover {
   opacity: 0.5;
}

画像(img要素)の上にマウスポインタが載ると、その画像の透明度(正確には不透明度)が50％になります。
つまり半透明です。

• 画像に半透明のカラーフィルタを掛けたような感じにする

css

p {
   background-color: #8080ff; /* ボックスの背景色(＝カラーフィルタ) */
}
p img:hover {
   opacity: 0.6;
}

上記のソースコードを記載するとカーソルを乗せた際、
指定した色のフィルターがかかります。
下記に三原色のソースコードを記載しておきます。
「淡い青(#8080ff)」・「淡い黄(#ffff80)」・「淡い赤(#ff8080)」