"water Ripples Effect"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ripples</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script> </head> <body> <div class="full-landing-image"> </div> <script> $(".full-landing-image").ripples({ resolution: 200, perturbance: .004, }); </script> </body>
body{ margin: 0; padding: 0; } .full-landing-image{ width: 100%; height: 100vh; background: url('https://raw.githubusercontent.com/DallinEdmunds/waterRipples1/master/pond.jpg') no-repeat center; background-size: cover; }

Related: See More

Argon Design System
Hover Effect Style
Sonar Wave Effect in Circle With CSS
Different types of hover and transition effect.

Questions / Comments: