[Resolved] Sections – background image

[David]

Hi Tom and Leo,

can you confirm that a background image is applied to the out div .generate-sections-container?

thanks

David

[Tom]

Yea, it’s applied to the outer .generate-sections-container element.

[David]

Thanks Tom, thought as much. Will have to apply background images with CSS then.

[David]

As it goes Tom, you may have another idea.
I want to create the Zoom on hover affect with the section background image.
Current method is to put the child element with background image in a parent container (Section inner container) with no overflow. And then hover on parent scales the child. (which cant be done with the section container background image).
Without using JS is there another way to do this?

[Tom]

I’m not sure if that kind of thing is possible with background images. Do you have any examples for me to look at?

[David]

Hi Tom,

This is one of my current working examples, this is a little more complex as it has a ‘button’ over the top of the image. This is all written into the section.

https://skinandflint.com/home-grid-2

Elsewhere i am working on putting the background image into the generate-sections-inside-container then set the overflow: hidden; and :hover properties on the generate-sections-container to create the zoom effect.

This works fine. But it still requires CSS to apply the background image. I suppose what i’m really looking for is to have an option within the section settings to place the background within the inside container. That way someone else could easily add background images to get these types of effect.

[Tom]

Hmm, there’s no way to change where the image is applied to currently, but I’ll take a look at the code to see if I can do something about that for a future version 🙂

[David]

Hi Tom / Leo

seeing as your not busy…….
I found this stackoveflow article relating to copying a background image from one div to another.

Unfortunately my experience with JS is pretty sparse. Any ideas on whether this could be used to copy the Section background image into the inside-container?

thoughts appreciated.

[Tom]

I wouldn’t use javascript for something like this – it would result in a flash of the original styling until the javascript is loaded and initiated.

You could definitely try it – I would look at jQuery though, as it’s a lot more beginner friendly than vanilla JS 🙂

[David]

Hi Tom, if thats the case then i won’t even go there. Happier without unnecessary JS and seeing as it can be done with an extra Div or two then its fine for my current projects.

Thanks

[Author]

Posts