overflow:hiddenでもはみ出るblurをレスポンシブ対応にする

子要素で filter:blur(); を指定したとき、親要素で overflow:hidden; してるにも関わらず はみボケする現象の対処方法です。

親要素に子要素のサイズを与えれば切り取れるのですが、汎用性がない上に小さいモニタで見ると画像自体がはみ出してしまうので困ります。

それらを解決するついでに、スマホでもメインカラムからはみ出ないようレスポンシブにも対応しましょう。

検証デモ

エフェクトをかける画像と、ラッパーとなるDIVを用意します。

HTMLとCSSコード

【HTML】
<div class="wrapper"><img></div>


【CSS】
.wrapper { overflow: hidden; }
.wrapper img {
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transition: .1s;
transition: .1s;
}
.wrapper:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}


基本のコードです。特に指定がない限り、変更を加えない要素は同じコードを継承します。

デモ

DIV にサイズを与えていないので、横幅がメインカラム一杯まで広がってます。その結果、画像の右側が元の画像より膨らみました。

しかし、ここで慌てて親要素に画像サイズを与えるとスマホではみ出してしまいます。

filter:blur; のはみ出し対応

まずは親要素を子要素にフィットさせて、ブラーをかけてもはみ出さないようにします。ひとまず display:inline-block; を使います。

display:inline-block; で対応

【CSS】
.wrapper {
display: inline-block;
overflow: hidden;
}


img に対する指定は最初と同じです。

display:table; で対応

【CSS】
.wrapper {
margin: 0 auto;
display: table;
overflow: hidden;
}


display:table; を使うことも出来ます。display:table; を使うと margin: 0 auto; による中央揃えが効くので結構便利。

画像をレスポンシブ対応にする

ただし、上記のコードをそのまま使うと小さいモニタで見たとき原寸のまま右側だけ見切れてしまうはずです。

レスポンシブ対応にするには img に対する指定を次のコードに差し替えます。

【CSS】
.wrapper img {
max-width: 100%;
height: auto;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transition: .1s;
transition: .1s;
}


おわりに

そんなわけで「ブラーをかけた画像を原寸トリミングしてスマホでも綺麗に縮小する」方法でした。

ちなみにマウスオーバーでブラーを消しているのは検証デモのためなので、実装する時はお好みで外して下さい。

それではまた。(・∀・)