Create Liquid Displacement Animation Effect using SVG

This tutorial blog to learn how to create Image Hover Liquid Displacement effect using SVG filter. This is very unique and use full effect for website.

Video tutorial of Liquid Displacement Animation Effect using SVG

This tutorial video to learn how to create Image Hover Liquid Displacement effect using SVG filter. This is very unique and use full effect for website.

Liquid Displacement Animation Effect using SVG [Source Codes]

This source code can help you to create Liquid Displacement Animation Effect using SVG.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="img_box">
		<svg viewBox="0 0 1920 1280">
			<image id="img1" xlink:href="images/pic1.jpg" filter="url(#fl1)" />
			<filter id="fl1">
		    <feTurbulence baseFrequency="0.5" numOctaves="20"></feTurbulence>
		    <feDisplacementMap in="SourceGraphic" scale="200">
		    	<animate attributeName="scale" dur="0.5s" values="200;100;0" begin="img1.mouseover" fill="freeze"/>
		    	<animate attributeName="scale" dur="0.5s" values="0;100;200" begin="img1.mouseout" fill="freeze"/>
		    </feDisplacementMap>
			</filter>
		</svg>
	</div>
	<div class="img_box">	
		<svg viewBox="0 0 1920 1280">
			<image id="img2" xlink:href="images/pic2.jpg" filter="url(#fl2)" />
			<filter id="fl2">
		    <feTurbulence baseFrequency="0.1" numOctaves="20"></feTurbulence>
		    <feDisplacementMap in="SourceGraphic" scale="200">
		    	<animate attributeName="scale" dur="0.5s" values="200;100;0" begin="img2.mouseover"  fill="freeze" />
		    	<animate attributeName="scale" dur="0.5s" values="0;100;200" begin="img2.mouseout" fill="freeze"  />
		    </feDisplacementMap>
			</filter>
		</svg>
	</div>
</div>


</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #054d77;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.container{
	max-width: 100%;
	margin: 0 auto;
	width: 100%;
	display: flex;
}
.img_box{
	position: relative;
	flex: 0 0 calc(50% - 40px);
	margin: 0 20px;
	overflow: hidden;
}

Create Liquid Displacement Animation Effect using SVG

Video tutorial of Liquid Displacement Animation Effect using SVG

Liquid Displacement Animation Effect using SVG [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery