jQueryで作る、水紋と水の揺らめきを紹介します。
クリックで水紋が、マウスオーバーで水が揺らめきます。
今回使用したのは、jquery.ripples.jsです。

jQueryも導入してください。

以下がコードサンプルになります。

▼jQuery

$(function(){
	let $suimon = $('.suimon');
	$suimon.ripples({
		resolution: 400,   (波紋の大きさを調整)
		dropRadius: 25,    (波紋が生み出すブレを調整)
		perturbance: 0.05  (波紋の広がりの速度)
	});
});

▼CSS

--(コンテンツ中略)--
.suimon{
	width:1000px;
	height:500px;
	background: url (画像のパスを指定してください) #000;
}

▼HTML

今回、参考にさせていただいたのは、
Jqueryripples『LIG』さんです。
ありがとうございます。

デモページは、こちら