背景を半透明すりガラス風に。業界に詳しい情報通Kさんの作り方

01 . hoverしたら画像を半透明

サムネイルなどでよくみるパターンです。画像の上にマウスカーソルが来たら画像が半透明になるタイプです。この場合は「opacity」を使います。画像にマウスを乗っけてみてください。

HTMLはこんな感じ

<div id="sample-image-jyohou2">
<img src="画像URL" alt="サンプル写真">
</div>

CSSはこんな感じ

#sample-image-jyohou2 img:hover{
	opacity: 0.5;
}

要素全体を半透明にする場合に使えばOKです。数値は0.0から1.0を指定できます。数値が小さくなるほど透明になります。

02 . 背景だけを半透明、すりガラス風に

同じ半透明でも属性（背景など）だけに半透明を適用したい場合は「rgba」を使います。

ざっくりですがHTMLはこんな感じ

<div id="sample-image-jyohou2-02">
<div id="sample-image-jyohou2-hover">
	<p>業界に詳しい情報通Kさん</p>
</div>
</div>

CSSはこんな感じ

#sample-image-jyohou2-02{
	width: 227px; height: 313px;
	background: url(画像URL);
}
#sample-image-jyohou2-hover{
	width: 227px; height: 150px;
	border: 1px solid #AAAAAA;
	background: rgba(255,255,255,0.8);
}

背景(background）として画像を使いその上に白の要素(sample-image-jyohou2-hover)を被せています。rgbaは属性ごとに半透明を指定できるのでテキスト「業界に詳しい情報通Kさん」は半透明になることなく読みやすいまま背景だけが半透明になっています。

同じHTMLでsample-image-jyohou2-hoverにopacityを当てるとこんな感じになります。

#sample-image-jyohou2-hover2{
	width: 227px; height: 150px;
	border: 1px solid #AAAAAA;
	background: #FFFFFF;
	opacity: 0.5;
}

opacityはセレクタ全体に適用されるため文字まで一緒に半透明になっています。opacityとrgbaの違いがお分かりいただけたでしょうか。

03 . rgbaの色指定

RGBAは色R（red）G（green）B（blue）にA（alpha:透明度）が加わったものですが、色の指定は16進数（FFとか）で指定せず、10進数で指定する必要があります。上のサンプルでいうとrgba(255,255,255,0.8)の255の部分です。

これはFF=255ですので#FFFFFF（白）のalpha:0.8という意味になります。16進数から10進数への変換は計算や対応している電卓で導き出すことが出来るのですが、早見表を公開してくださっている方がおられましたので紹介しておきます。

10進数/16進数対応表

画像を加工することなくCSSだけで色々できるのでイメージ膨らみますね。情報通Kさんだけでなくブログデザインなどにも取り入れてみてください。