Archived topic

Section Slideshow Background

7 replies · Started by Mike on February 11, 2018

Viewing posts 1–8 of 8

February 11, 2018 at 9:59 am #493696

I have recently redesigned one of the websites I work on using GeneratePress sections and lightweight grid columns. I have a main section that uses an image as its background, I am then applying the following CSS to stlye it and make it full screen....

.home #Home {
	position: relative;
	height: 96vh
}

My question is... can I have the background change every few seconds? Preferably with a nice animation...

You may also notice I have a few lightweight grid colums with various services in them and background images. Is there any way in my hover CSS I can have a nice animation as the background tint over the image is removed?

Thanks,
Mike

February 11, 2018 at 8:51 pm #494015

Hey Mike,

That would likely require javascript. You may be better off going with a slider plugin of some sort, as you could add your content to it and have the images rotate.

What kind of animation are you looking for in the services section?

February 12, 2018 at 4:27 am #494277

Hello,

Do you know of any slider plugins that will work well with GP sections and allow me to use that CSS to make them full screen?

With regards to the animation, I would just like it to be a little slower. Instead of the tinted background being immediatly removed when the mouse hovers over, if there could be a little delay I think it would look a lot smarter.

Thanks,
Mike

February 12, 2018 at 8:32 pm #494897

Most, if not all slider plugins will work nicely in GP and Sections. A lot of them will actually have a built in full height option as well.

It's a little complicated adding a transition to multiple backgrounds, but this may lay the groundwork for you: https://codepen.io/thebabydino/pen/AtzpB

February 13, 2018 at 6:17 am #495170

Hello Tom,

I will look into the slider plugins and see what I can bodge together!

With regards to the transition, I followed the link you sent and copied the exact code shown there into the Weddings service on my website, however it has had no effect. Any ideas why? I have checked a few times and it seems to be exactly the same!

Thanks,
Mike

February 13, 2018 at 9:34 pm #495841

Unfortunately it's only a proof of concept, not a plug-n-play type of code snippet.

I just spent about half an hour on this and couldn't achieve the result you're looking for. It might be worth asking over on https://stackoverflow.com/.

I would be interested in hearing if someone is able to do it :)

February 14, 2018 at 4:51 am #496038

Hello Tom,

Wow! I have even stumped the pro! I actually did spend hours on it myself and was equally stumped!

I may ask on stack overflow. If I ever come up with a solution I will be sure to post it here.

Thanks,
Mike

February 14, 2018 at 9:29 am #496352

Thank you! I'll keep an eye out for solutions as well :)

This archived topic is closed to new replies.

Start building better websites today.