I'm using SP Pagebuilder PRO. I've been trying to use hover over images using CSS and classes. I also tried editing the CSS file. I've had mixed results. When hovering over the image I wanted a secondary gradient image and text message eg: See more...
I've checked the internet and support and found nothing. I have been using Joomshaper products for many years, I do not want to have to purchase another extension from elsewhere.
Can you pleas assist?
Hi
Thanks for contacting us. Do you want it like this?
Use this custom CSS
.sppb-carousel-extended-content-wrap:hover{
background-color: rgba(0,0,255,0.3);
}Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
-Regards.
Thta's great but I also wanted to add a button(non-clickable) or text saying " Read now"
I've managaed to achieve it. Thanks for your help!
You are most welcome. You can now close this post by accepting my answer.
One more question concerning hover over.
Is there a way using bootstrap or CSS to pause on hover over using a data-pause attribute?
.sppb-carousel-extended-content-wrap:hover{
code here;
}
Lot's of people are asking about this
Thanks
Hi Mike.
You can write background color keyframe animation for .sppb-carousel-extended-content-wrap and start it on hover instead of main background-color: rgba(0,0,255,0.3); property. Then you will be able to configure delay via animation-delay property.
https://www.w3schools.com/css/css3_animations.asp
P.S.
I'm not sure that by pause you meant a delay and not smoothness.
If you need smoothness, but not delay, use this code:
.sppb-carousel-extended-content-wrap {
transition: .4s;
}Hi Pavel,
What I am looking for is this:
When you hover over (mouse-over) any one of the scrolling images, the scrolling pauses.
Something like this: (I tried this but it doesn't work)
.sppb-carousel-extended-content-wrap:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
cursor: pointer;
}
Now it is clear.
This is not possible to do through CSS. You will need to write your own JavaScript.
As far as I know, sp_carousel.js is not the carousel from Bootstrap, therefore Bootstrap data attributes is not possible to use there and it does not have pause on hover option from the box.