Well each slide has its own unique CSS ID. So if your slider has a CSS ID of:
#slider_image_demo
Then your slides will have CSS IDs of:
#slider_image_demo_slide01
#slider_image_demo_slide02
#slider_image_demo_slide03
…
So this should point you in the right direction.
Yes, i have this.
can you please tell me, how can i add hover color in each slider image? Please show me a custom css example for one slider css class. Please.
-
This reply was modified 4 years, 6 months ago by
rajasarma.
-
This reply was modified 4 years, 6 months ago by rajasarma.
I have like this admin:
Main_Category_Slider_slide01.
So please tell me how can i do this with custom css?
Hi, you still have not provided me with a link so I can have a look?
oh, actually the website is down today for a hosting reason. but i will send you a screenshot of the slider.
Please see the slider here:
Slider Image Link
I want to add a hover color on each image of the slider, so please tell me how do i need to add the custom css code. Please tell me as soon as possible.
Ok, I was hoping for a link, but this should hopefully help:
#SLIDER_ID .owl-item .sa_hover_container .sa_hover_buttons {
top:0px !important;
left:0px !important;
width:100% !important;
height:100% !important;
margin:0px !important;
}
#SLIDER_ID .owl-item .sa_hover_container .sa_hover_buttons a,
#SLIDER_ID .owl-item .sa_hover_container .sa_hover_buttons div {
width:100% !important;
height:100% !important;
background-image:none !important;
background-color:transparent !important;
}
#SLIDER_ID .owl-item #SLIDE1_ID .sa_hover_buttons a:hover,
#SLIDER_ID .owl-item #SLIDE1_ID .sa_hover_buttons div:hover {
background-color:rgba(255,0,0,0.1) !important;
}
#SLIDER_ID .owl-item #SLIDE2_ID .sa_hover_buttons a:hover,
#SLIDER_ID .owl-item #SLIDE2_ID .sa_hover_buttons div:hover {
background-color:rgba(0,255,0,0.1) !important;
}
#SLIDER_ID .owl-item #SLIDE3_ID .sa_hover_buttons a:hover,
#SLIDER_ID .owl-item #SLIDE3_ID .sa_hover_buttons div:hover {
background-color:rgba(0,0,255,0.1) !important;
}
(replace “#SLIDER_ID” with the CSS ID for your slider and “#SLIDE1_ID” etc with the CSS ID for each slide)
Ok, thank you so much admin, i wiil try this now.
Hello admin, i have not seen any changes on hover. please see the site, where and which slider i want to add the hover color effect Here.
And i want the hover color effect like this site SA Slider (which is available under “Browse Ctegories”, please see Here.
Please see, and tell me how can add this. Please admin.
Thank you in advance.
-
This reply was modified 4 years, 6 months ago by rajasarma.
Please admin tell me about this. and please see the links.
Ok, I’ve just spent some time testing this, and this code does work.
Have a look here at this test slider I created:
https://edgewebpages.com/testing-page/
(6 of the slider have hover-over colour effects)
The CSS Code I used to achieve this was:
#test_page #showcase_demo .owl-item .sa_hover_container .sa_hover_buttons {
top:0px !important;
left:0px !important;
width:100% !important;
height:100% !important;
margin:0px !important;
}
#test_page #showcase_demo .owl-item .sa_hover_container .sa_hover_buttons a,
#test_page #showcase_demo .owl-item .sa_hover_container .sa_hover_buttons div {
width:100% !important;
height:100% !important;
background-image:none !important;
background-color:transparent !important;
}
#test_page #showcase_demo .owl-item #showcase_demo_slide01 .sa_hover_buttons a:hover,
#test_page #showcase_demo .owl-item #showcase_demo_slide01 .sa_hover_buttons div:hover {
background-color:rgba(255,0,0,0.1) !important;
}
#test_page #showcase_demo .owl-item #showcase_demo_slide02 .sa_hover_buttons a:hover,
#test_page #showcase_demo .owl-item #showcase_demo_slide02 .sa_hover_buttons div:hover {
background-color:rgba(0,255,0,0.1) !important;
}
#test_page #showcase_demo .owl-item #showcase_demo_slide03 .sa_hover_buttons a:hover,
#test_page #showcase_demo .owl-item #showcase_demo_slide03 .sa_hover_buttons div:hover {
background-color:rgba(0,0,255,0.1) !important;
}
#test_page #showcase_demo .owl-item #showcase_demo_slide04 .sa_hover_buttons a:hover,
#test_page #showcase_demo .owl-item #showcase_demo_slide04 .sa_hover_buttons div:hover {
background-color:rgba(128,128,0,0.1) !important;
}
#test_page #showcase_demo .owl-item #showcase_demo_slide05 .sa_hover_buttons a:hover,
#test_page #showcase_demo .owl-item #showcase_demo_slide05 .sa_hover_buttons div:hover {
background-color:rgba(0,128,128,0.1) !important;
}
#test_page #showcase_demo .owl-item #showcase_demo_slide06 .sa_hover_buttons a:hover,
#test_page #showcase_demo .owl-item #showcase_demo_slide06 .sa_hover_buttons div:hover {
background-color:rgba(128,0,128,0.1) !important;
}
Hi, just a follow-up on this – did you manage to get this code to work for you?
