Create Water Wave animation using CSS and SVG

This tutorial blog to learn how to create water wave animation on image using CSS and SVG.

Video tutorial of Water Wave animation using CSS and SVG

This tutorial video to learn how to create water wave animation on image using CSS and SVG.

Water Wave animation using CSS and SVG [Source Codes]

This source code can help you to create Water Wave animation using CSS and 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">
    <img src="images/pic1.jpg">
    <a href="#">Lorem ipsum dolor</a>
  </div>
  <div class="img_box">
    <img src="images/pic2.jpg">
    <a href="#">Lorem ipsum dolor</a>
  </div>
  <div class="img_box">
    <img src="images/pic3.jpg">
    <a href="#">Lorem ipsum dolor</a>
  </div>
</div>

<svg style="width: 0; height: 0"> 
  <filter id="filter1" >
    <feTurbulence baseFrequency="0" numOctaves="1">
      <animate attributeName="baseFrequency" dur="3s" values="0.01;0"/>
    </feTurbulence>
    <feDisplacementMap scale="40" in="SourceGraphic"/>
  </filter>
</svg>  

</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{
	width: 100%;
	display: flex;
	padding: 0 20px
}
.img_box{
	position: relative;
	flex: 0 0 calc(33% - 40px);
	margin: 0 20px;
	overflow: hidden;
	opacity: 0; 
	animation: 1s svg_anim;
	animation-fill-mode: forwards;
	position: relative; 
}
.img_box img{
	max-width: 100%;
	filter: url(#filter1);
}
.img_box a{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 26px;
	text-decoration: none;
	transition: all 0.3s;
	text-shadow: 1px 1px 3px #000;
	opacity: 0;
}
.img_box:hover a{
	opacity: 1;
	backdrop-filter: blur(3px);
	-moz-backdrop-filter: blur(3px);
}
.img_box:nth-child(3n + 1){top: -60px;}
.img_box:nth-child(3n + 2){top: 60px; animation-delay: 0.5s;}
.img_box:nth-child(3n + 3){top: -60px; animation-delay: 1s;}

@keyframes svg_anim{
	0%{ opacity: 0; }
	100%{ opacity: 1; top:0;  }
}

Create Water Wave animation using CSS and SVG

Video tutorial of Water Wave animation using CSS and SVG

Water Wave animation using CSS and 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