Welp, thanks to an amazing animation I found, I decided to modify it to this cherry blossom image. One trouble spot though. I want to just have the bottom half of it animating the water. I tried to do this, but it came out not so well. But here it is without that :
Did you mean something like this?
Most of the top of the image is black so you probably want to animate less than half of it which is why I made it animate further down.
I simply added the filter to the whole image and then placed a duplicate image on top with a clipped out section to allow the effect to be seen only on part of the image. Just adjust the clip-path co-ordinates to show more or less of the image.
2 Likes
Hi there ladans37,
here is a water ripple example…
Full Page View:-
https://codepen.io/coothead/full/bGwZEKx
Editor View:-
https://codepen.io/coothead/pen/bGwZEKx
coothead
3 Likes
Hello @coothead thanks. I tried putting @PaulOB’s example on my blog, but it came out really huge haha. I don’t know where in the code to shrink it down to size.
What size do you want it and in what context are you placing it.
I assumed you wanted it to cover the whole body looking at the codepen you posted?
There’s various ways to do this and the version by @coothead is good and simpler.
Here’s a smaller version of my example.
2 Likes
I wish I could just share a pic of where I want it, but here is a screen shot link. This is the one you first linked me to, with the reflection covering the whole image.
Do you want it in the centre of the viewport and taking up the whole viewport.?
Or does it need to be smaller than the viewport.?
Also are you putting content on top of it or below it ?
Should the image scroll away or be fixed in place and content scrolls over the top?
The more information you provide will help to determine the best way to approach it 
1 Like
@PaulOB, does the image I shared not help? Pretty much explains it all . How else should I be specific?
If that image is how you want it to look then it helps a bit but I can’t see the dynamics of the page.
Does the image scale with the viewport or is it a fixed size?
Does it scroll away once you start scrolling? Or does content scroll over it.
Is it 50% of the viewport height or is it the same fixed height all the time.
The image you are showing looks pretty large but your original is only 350px approx so will lose quality if scaled larger.
Have a look at this example and we can take it from there
1 Like
There’s no scrolling. It has a width and height size. Lemme see if I can take a wider screen shot of it for you.
It’s at the side as you can see there.
Yes its still much the same code you just have to package it where you want.
See this example:
1 Like
Cool, thanks. Trying to figure out how to move it over.
Think you meant border: 1px solid silver. Solver would be interesting though 
1 Like
It all depends on your page structure and what else is going on in there.
On an empty page you can just move it over with a left auto margin.
It all depends on your page structure which would be built to accommodate the things you want.
Typing too quick for my own good
1 Like
Right. Figured it out now
.water-box {
padding: 10px;
margin: 285px 285px 1rem;
}
Working with that
It’s messing up my blog’s layout, as it shows too big once again 
That doesn’t sound right and is a bit of a magic number fix. Usually you would let the existing layout handle the positions and just use margins to nudge things around especially if you are placing this in an existing side column
We’d need to see the html and css for your blog layout or a link to the page in question to help properly.
Or you could build a codepen with the layout structure that it uses.
Ok. I’m trying to put it on there again, and will link you to the blog when I got it up.
1 Like