IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

opacity - 透明度を変更し画像などをぼかす -hover処理あり- | CSS Introduction

Photo by Lai Man Nung on Unsplash

Photo by Lai Man Nung on Unsplash

 

 

 

opacity

CSSのopacityプロパティはHTML要素の透明度を変更することができ、画像にぼかしをいれたり透明にしたりすることができます。

マウスオーバー時に画像をぼかすことで、画像の強調表示も可能です。

 

opacity: 透明度(0.0~1.0);

 

DEMO

sample使用画像:Lai Man Nung on Unsplash

sample1

通常

f:id:Surprisedblog:20190809174731j:plain

hover

f:id:Surprisedblog:20190809174731j:plain

HTML
<div class="sample1-a">
<p><span style="color: #999999;">通常</span></p>
<img class="hatena-fotolife" title="f:id:Surprisedblog:20190809174731j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190809/20190809174731.jpg" alt="f:id:Surprisedblog:20190809174731j:plain" width="195" />
</div>
<div class="sample1-b">
<p><span style="color: #999999;">hover</span></p>
<img class="hatena-fotolife" title="f:id:Surprisedblog:20190809174731j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190809/20190809174731.jpg" alt="f:id:Surprisedblog:20190809174731j:plain" width="195" />
</div>
CSS
.sample1-a>img{
    opacity:0.5;
}
.sample1-b>img:hover{
    opacity:0.5;
}

 

 

 

opacityを使ったWEBデザイン系の記事はコチラ

www.it-the-best.com