CSS | 画像の縁まわりをぼやかす方法
CSSの疑似要素とbox-shadowを使って画像と背景の境界となる画像の縁（ふち）周りをぼかやかす方法を紹介しています。
画像の縁をぼかす方法
疑似要素の::before または ::afterとbox-shadowを使って画像と背景の境界となる画像の縁（ふち）周りをぼかやかす方法を紹介しています。
See the Pen CSS | Rounded corners Images by yochans (@yochans) on CodePen.
HTMLは画像を入れるコンテナ用の親要素HTMLをdivタグで作成しています。
ぼかしを指定するのは親要素部分になりますのでコンテナは必要です。
<div class="container">
<img id="image-1" src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg">
</div>親要素のコンテナに擬似要素::afterを作成して、box-shadowで背景色と同じ色のぼやけた影を作成しています。
サンプルの背景色は白としていますが、最近はダークモードなるものがありますので、ダークモードで表示されている皆さんには、がっかりな表示結果となっているかも知れません。
display: flexとoverflow関連は画像を拡大してもコンテナに縦横中央で収まるようにしているものです。
画像のサイズが固定であったりする場合など用途によっては必要ありません。
.container {
position: relative;
width: 300px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container::after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 10px 15px #FFF;
}
.container img {
width: 150%;
}コンテナのサイズと画像のサイズが同じになる必要があります。
サンプルではコンテナの横幅を指定、画像のサイズをコンテナの横幅100％となるようにしています。