Reply To: WooSlider "Posts" content overlay on hover

#13199
Steve Hammond
Participant

Good news, I have found a solution to this with the help of the Woo team.
After submitting my question to them they provided some custom CSS to add but it did not work straight away as it was.
So, I played about with the code a little bit and managed to make it work.
Therefore I thought it would be good to share with you guys so anyone can see this if they have the same issue and want the text on slides to be hidden until hovered over.
Here is my code:

.wooslider .overlay-natural.layout-text-bottom .slide-excerpt {
opacity: 0;
visibility: hidden;
max-width: 50%;
}

.wooslider .overlay-natural.layout-text-bottom:hover .slide-excerpt {
opacity: 1;
visibility: visible;
max-width: 50%;
}

At present, only the ‘Posts’ slideshow option lets you have the content overlay. I set it to display along the bottom and to be ‘natural’.
So depending on how you have it set up you will need to adjust accordingly.
I also set a maximum width so the text would not run along the full width of the slide.
This is a great bit of code that I am sure will come in handy for others, as it has for me.
Be aware though, I am using the ‘Canvas’ theme, but it should be the same for whatever you use.

Anyway I hope this helps anyone with the same issue!

Thanks again,

Simon Madeley
Hammond Design

Scroll to Top