Solved SP Page Builder

SP Page Builder Carousel Image hover

Asked by Lee Tempest 2 years ago Last activity 2 years ago

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!

Accepted answer

Marked as the solution

Pavel

2 years ago · edited

How 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-border instead of sprdoubleborder
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.

3 more replies

Pavel

2 years ago · edited

Hi.

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 Asked this

2 years ago

Pavel,
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?

Mehtaz Afsana Borsha Staff

2 years ago

Thanks for contacting us. Could you please mention which portion do you want to set border? If possible give me a screenshot of it.

-Regards.