SP Page Builder Carousel Image Hover
Lee Tempest
Hello, I'm trying to modify the Page Builder Carousel with scrolling images. I have added CSS styles to turn the images to greyscale. I now want them to be full color on hover. However it does not work!
Please check out:
https://sherpa-jfive.under-development.info/
Scroll down to the SherpaReport has been featured in section. This is the Carousel with images. My CSS is:
.sppb-carousel-extended-item img {filter: grayscale(100%);} .sppb-carousel-extended-item img:hover, .sppb-carousel-extended-item img:focus {filter: grayscale(0);}
But the hover class does not work!
Please help!
Pavel
Accepted AnswerHow can I make this so it is 'universal' and can use in other locations?
Hi.
You can use your column class and a slightly different code.
.sprdoubleborder {
position: static;
}
.sprdoubleborder::before,
.sprdoubleborder::after {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #386d7c;
}
.sprdoubleborder::before {
right: -5px;
}
.sprdoubleborder::after {
right: 5px;
}Tips:
-
In order for the code to be more readable, use the separation of words in the class name. For example
spr-double-borderinstead ofsprdoubleborder -
Use this button to provide your code in post
- Do not write the code with lines, but write it in a column (as in my example). Writing the code in lines makes your work difficult and does not achieve minification goals (if you strove for this).
After the development is completed, you can minify your entire code through an online service or through a plugin of your desktop app HTML editor.
Pavel
Accepted AnswerHi.
Your code is not correct.
Here is
.sppb-carousel-extended-item {
filter: grayscale(100%);
}
.sppb-carousel-extended-item:hover {
filter: grayscale(0);
}Using :focus is pointless. This applies only to <button>, <a>, <input>, <select>, <textarea>
Lee Tempest
Accepted AnswerPavel, Thanks for this, If I could ask another question! I need to have a double border between my rows. However I cannot seem to specify the CSS for the left column so am using the ID which is unique and I cannot then use across multiple pages:
https://sherpa-jfive.under-development.info/
You can see the custom double border between the columns below the video. My CSS is:
.sprdoublecontainer #column-wrap-id-e4680ae8-b277-4c44-93be-4047a1b77096 {border-right: solid 1px #386d7c;} .sprdoublecontainer #column-wrap-id-e4680ae8-b277-4c44-93be-4047a1b77096:after {content: '';position: absolute;background-color: #386d7c;width: 1px;height: 100%;bottom: 0;right: 10px;}
How can I make this so it is 'universal' and can use in other locations?
