Cherry blossom water reflection

Trying to get it to look like this :

But, it’s not working :frowning:

Nooo, not like that. Ugh, sorry. Like this :

Sorry I must have slipped into a time warp :slight_smile: I started partying like it was 1999 :wink:

I thought you said you wanted the blossom here:

But you seemed to have placed it in the big middle box instead.

You can’t wrap all the content in the image wrap as you don’t want it to stretch forever with the content. Look at my last demo where it is in a self contained div and you would place that whole block inside your wrap or column or whatever. Don’t try and fill the image box with more content apart from in the way that I have shown it in the last demo.

I assume your page is a work in progress and I would suggest that before you start adding in pretty pictures and animations that you fix the structure of the page as everything is overlapping and not really making any sense at all.

Your first task would be to get some order and structure to that page so that it makes sense and is usable. There’s no point in adding things yet as there’s no where nice to put them yet. I realise this is probably a work in progress anyway but first things first :slight_smile:

I’m out now until tomorrow so that will give you a chance to tidy up a bit :wink:

2 Likes

Still working on it, but would like some help. I forgot to mention an important thing though. I do already have a class “.wrapper”, and that is for my blog posts, date, title…etc. So that may be why it isn’t looking nice. I tried changing that wrapper to #wrapper instead. Worked somewhat, but the image hides behind the main wrapper, and I can’t get z-index to move it up, no matter how much.

Hi there ladans37,

here is an example that replicates
the image in your post #22

Full Page View:-
https://codepen.io/coothead/full/RwGdZbR

Editor View:-
https://codepen.io/coothead/pen/RwGdZbR

coothead

2 Likes

Hi @coothead , many thanks. It looks gorgeous. I will play around with this. Hopefully it will fit on my blog as this size :slight_smile:

It will fit on a mobile device…

292 x 434

coothead

1 Like

Nice. I played around with it on my blog. I need it to be smaller than what it is, but then the reflection will mess that up. I tried getting it much smaller.

if you change this…

#flower-container {
    max-width: 40em;
    margin: 1em auto;
    border: 0.25em solid #a52a2a;
    background-color: #a52a2a;
 }

…to this …

#flower-container {
    max-width: 25em;
    margin: 1em auto;
    border: 0.25em solid #a52a2a;
    background-color: #a52a2a;
 }

you will reduce it’s width by 15em - ( 240px ). :winky:

coothead

2 Likes

Will try that :slight_smile: thanks

How about the image itself? I’m having a hard time with that, as they’re two different images. The size of the flower image affects the ripple image.

Think I’ll leave out the container, as it confuses things lol.

Having a lot of difficulty with the ripple. I can’t get it to the right size. Idk what else I can do.

What is the right size? :eyebrows:

Well, you could show us your coding attempt. :winky:

coothead

Lemme show you another screen shot of what I have so far…

No, we need code. :unhappy:

How else can we see what is the cause of your discomfort? :wonky:

coothead

1 Like

Right. Ok hang on…

So, I’ve just been playing with the numbers to #ripple :

#flower{
	position: relative;
	top:500px;
	left:520px;
	width: 15em;
	padding-top: 16.25em;
	margin: 8.125em auto;
	border: none;
	background-image: url(https://i.ibb.co/CHHMHrR/pink-cherry-blossom-on-black-260nw-48419839.jpg);
	background-repeat:no-repeat;
    background-size: 100% auto;
    z-index:90000;
    
 }

#ripples {
 	position: absolute;
 	width: 16em;
 	height: 8em;
 	top: 7.35em;
 	left: -0.5em;
 	background-image: url(https://i.ibb.co/CHHMHrR/pink-cherry-blossom-on-black-260nw-48419839.jpg);
    background-size: 130% auto;
    background-position: 0 -9.75em;
    filter: url( #turbulence);
 }

Wish we could just put them together and resize them both at the same time, rather than individually. I think that would be easier. I still am not getting the perfect fit no matter what numbers I try.

You have decimated the code, so it obviously will not work. :taped:

When I asked for the code, I really should have said give
us the code of the page in which you are trying to insert
the image and indicate where you want it positioned, :winky:

coothead

1 Like