How to do this effect

User 458539 Photo


Registered User
1,201 posts

My client likes this effect

https://www.bosley.com/

The right side of the banner specifically. Normally I put the image as the background the superimpose a container - subgrid etc on top with a transparency background. Hope that makes sense. But my question is how do I make it so that it stays the height of the banner picture when expanding and contracting? The three boxes ( Special Offer, Get Started and Discover) adjust accordingly. Have a feeling its a simple solution and I think I've stumbled on it before but for the life of me I can't remember.

Thanks - coffee not helping yet!!!

Byron
User 2699991 Photo


Registered User
2,265 posts
Online Now

Byron Tipping wrote:
My client likes this effect

https://www.bosley.com/

The right side of the banner specifically. Normally I put the image as the background the superimpose a container - subgrid etc on top with a transparency background. Hope that makes sense. But my question is how do I make it so that it stays the height of the banner picture when expanding and contracting? The three boxes ( Special Offer, Get Started and Discover) adjust accordingly. Have a feeling its a simple solution and I think I've stumbled on it before but for the life of me I can't remember.

Thanks - coffee not helping yet!!!

Byron


Are talking about having a slider as the banner or just a single image?
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,265 posts
Online Now

If it is just a full-width background image with the column(whatever you use) on the right, then it's pretty straight forward really

you set the height of the column (background image) (min/max)
Then you set the col/container(whatever you use, I generally use a"list container, (because it has 3 containers built in)
you set the
"list container"
to the same height as the background column
position = absolute (leave default settings or make adjustments as required)
display = flex
direction = column
justify = space between
items = center
content = flex start

You can then set the height of the "list-item-containers, to a % depending on how many you need
populate the list containers with whatever you want.

A small word of advice though,
at smaller device widths this set-up becomes cluttery and not good visually, so you should hide the r/h column at those
widths, & make a new column below the one with the background image.
Then you need to hide that column for larger widths (from second default breakpoint)

IF YOU ARE WANTING to do it with a slider & the r/h column thingy, then it gets a lot more complicated

I have demo's for both variations (background image & slider, with the column to the right/left)
If you want to view the demos, let me know & I will let you know where they are)


The Help You Need: When You Need It The Most
User 458539 Photo


Registered User
1,201 posts

Was talking about th me three boxes on the right

Thanks
User 458539 Photo


Registered User
1,201 posts

Thanks will try!
User 2699991 Photo


Registered User
2,265 posts
Online Now

Byron Tipping wrote:
Was talking about th me three boxes on the right

Thanks

I know you was talking about then, but they are over a slider in the site you mentioned,, I was asking if you intende having them over just a single background image (full width )
The Help You Need: When You Need It The Most
User 458539 Photo


Registered User
1,201 posts

Sorry yes single image
User 458539 Photo


Registered User
1,201 posts

Never have gotten comfortable with flex. But then again I have V3 and not worked with it much yet!
User 2699991 Photo


Registered User
2,265 posts
Online Now

Byron Tipping wrote:
Never have gotten comfortable with flex. But then again I have V3 and not worked with it much yet!


well you could still do it the old fashioned way with block in-line etc margins & padding but that's a lot of work
flex works ok in RSD v2.5
The one I did for my wife's new business is in RSD 2.5
The Help You Need: When You Need It The Most
User 458539 Photo


Registered User
1,201 posts

Thanks Wayan -will give this a crank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.