デモページはこちら

CSSのfilterプロパティの使用例をまとめました。filterプロパティはIE11でサポート外ですが、種類が豊富で実装が簡単です。

■ grayscale（グレースケール）
Googleマップをグレースケールにします。GoogleマップはGoogle Maps APIを利用すればIE11も含めグレースケールにできます。今回はAPIを利用せずiframeタグの埋め込みで、外側のクラス名map_wrapの空のdivタグにfilter: grayscale(100%);を適用します。filter: grayscale(1);でも同じです。

<div class="map_wrap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6991708523014!2d139.70088971555094!3d35.68440863740457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cc6e5e95555%3A0xeabec3409c3087df!2zTlRU44OJ44Kz44Oi5Luj44CF5pyo44OT44Or77yI44OJ44Kz44Oi44K_44Ov44O877yJ!5e0!3m2!1sja!2sjp!4v1602083170798!5m2!1sja!2sjp" width="100%" height="auto" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

.map_wrap {
	position: relative;
	padding-top: 56.25%;
	margin: 0 0 3em;
	filter: grayscale(100%);
}
.map_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

■ blur（ぼかし）
ぼかしを単体で使用する機会は少ないですが、画像のフェードイン・フェードアウトに、ぼかしありぼかし無しの動作を入れると違った効果が得られます。

<div class="blur_wrap">
	<div class="blur_btn">
		<input type="button" class="btn01" value="ロゴ画像を表示"><br><br>
		<input type="button" class="btn02" value="リロードしてリセット">
	</div>
	<img src="images/logo_bp.gif" alt="Brick Plan">
</div>

.blur_wrap {
	display: flex;
	align-items: flex-start;
}
.blur_btn {
	padding: 0 20px 0 0;
}
.blur_wrap img {
	visibility: hidden;
	opacity: 0;
	filter: blur(5px);
	transition: filter 1s, opacity 1s, visibility 1s;
}
.blur_wrap img.show {
	visibility: visible;
	opacity: 1;
	filter: blur(0);
}

$(function() {
	$('.btn01').on('click', function() {
		$(this).parent().next('img').addClass('show');
	});
	$('.btn02').on('click', function() {
		$(this).parent().next('img').removeClass('show');
	});
});