Image Carousel
Mike
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?
Mehtaz Afsana Borsha
Accepted AnswerHi
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.
Mike
Accepted AnswerThta's great but I also wanted to add a button(non-clickable) or text saying " Read now"
Mehtaz Afsana Borsha
Accepted AnswerYou are most welcome. You can now close this post by accepting my answer.
Mike
Accepted AnswerOne 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
Pavel
Accepted AnswerHi 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;
}Mike
Accepted AnswerHi 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; }
Pavel
Accepted AnswerNow 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.