I am using an Owl Carousel with Fancy Box Images as the content. The Fancy Box's style is the parallax hover effect. Right now, when the cursor is not hovers, it overlays the image with a grey color. Is it possible to use a texture instead, or another color?
You can use the css below to add a image texture to it.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi there!
I am using an Owl Carousel with Fancy Box Images as the content. The Fancy Box's style is the parallax hover effect. Right now, when the cursor is not hovers, it overlays the image with a grey color. Is it possible to use a texture instead, or another color?
Danke!
Hey Again,
You can use the css below to add a image texture to it.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box[data-style="parallax_hover"] .bg-img:after { background-image:url(my-image.png); }Thanks
ThemeNectar Support Team
Thanks Tahir!
May I disable color overlay for the fancy box?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box[data-style="parallax_hover"] .bg-img:after { background-color: rgba(40,40,40,0) !important; }Thanks
ThemeNectar Support Team
Hi Tahir,
Thank you for your reply.
I am trying to use a small image to use it as a repeat pattern.
I slightly modified the code, however it does not work and shows one texture full width on the whole slide.
How could I make it work as a pattern?
.nectar-fancy-box[data-style="parallax_hover"] .bg-img:after
{
background-image:url(image);background-repeat:repeat;
background-color: rgba(40,40,40,0) !important;
}
Oups never mind,
I just fixed it by using "background-size: 100px 100px;"
Thanks anyways ^^