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

Photo by Lai Man Nung on Unsplash

opacity

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

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

opacity: 透明度(0.0~1.0);

DEMO

sample使用画像：Lai Man Nung on Unsplash

sample1

通常

hover

例

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