Add background image on interaction with Navigation Layered?

[jptsetme]

Hi friends.

I’m building a website based on a design provided to me, and am trying to figure out how to accomplish something a bit unusual (using Pro theme). I have a Navigation Layered element within a Cell in a Grid. The design calls for an interaction when the user hovers over the menus, but rather than changing the text color, I’m trying to render a background image (which is really just a solid color, but in a custom shape that looks like a paintbrush stroke.) See the attached image.

I’m not married to a Navigation Layered element here if it would be easier to accomplish with some other structured text. Happy for any suggestions you have for how to accomplish this. If you need me to give you access to my staging site to look, just let me know.

Thanks very much!
–Joe

[tristup]

Hi Joe,

Thanks for reaching out.
Regretfully, there is no such option to set a Background Image on Interaction of the Navigation Layered element menu items. But you can use some custom CSS code to fill the specific portion of the Menu Item while hovering, I would suggest you go through the following articles which may help you.

How to hover over a div to change just a part of its background?

http://jsfiddle.net/Dm8ma/

NOTE: Please remember that the code in the reference links is a sample code, and it varies from case to case, and we can’t be guaranteed it works for you.
Thanks