I need to know if there is any way to generate a "ripples" fill effect OVER A PNG IMAGE. It doesn't matter if it's with CSS, SVG, Canvas or some external javascript library. With a small example they already help me a lot.
It would be something like this, but on a PNG image. https://camo.githubusercontent.com/43505d196a3df4510258183b2bd6f58e1c482f5a/687474703a2f2f672e7265636f726469742e636f2f7a48654d71716c68346a2e676966
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">
<div class="well">
<img src="https://www.hamburgsud-line.com/liner/media/hamburg_sud_liner_shipping/services/dry_cargo/20_trockencontainer_accordion_1240x697.png"style="width:100%">
</div>
</div>
As I already told you in my comment, I would have needed your images without warping. I got something similar from the internet. For the waves I use two canvas elements.
In the HTML I have a #Hamburg element, inside of which are all the faces of a parallelogram. If you don't like the orientation, please change this line of code:
transform: rotateY(-45deg) rotateX(-10deg) rotateZ(7deg);
in the CSS for the#Hamburg
. Also try changing the perspective of the body.I think this could help you achieve what you want. You just have to increment the property every "x" milliseconds.
I include the example:
source link