Accordion header image

[Lacylou]

Howdy!

I am using the accordion feature on one of my pages and I am trying to adjust the background to display an image on hover/select — instead of simply changing the background color. Is this possible? I have fiddled a bit with the CSS but to no avail.

This is the page — You can see around the accordion I have some rows set up with a hover feature, this is what I am trying to mimic with the accordion header.
https://staging2.casareinastaug.com/menu/#

[prakash_s]

Hello @Lacylou,

Thanks for writing to us.

Regretfully there is no option to set the accordion header background image on the hover but you can achieve it using custom CSS code.

You need to go to the Cornerstone page builder —>Accordion–>Customize—>.Edit CSS

Add this custom CSS code.

$el.x-acc button.x-acc-header:hover {
    background-image: url(image_source_url);
    background-size: cover;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks