IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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