Hover activates color field in the back

[ich]

Hello,
is there a way to define an area in mouse-off, when one is hover over it, in the back a color-field appears ?
To better explain what I mean, you may want to check the following website I found https://charmingplaces.de/reiseziele/

When you hove over the small-pictures (not the banner) and the text, a color-field in the back appears.
This happens, no matter whether a link is set in this area or not.

I tried with pop-up layer, but it appears on-top for sure and not in the back. I could copy-exact the entire objects in the pop-up layer and add the colorfield, but this means more laoding work for the page.

Ciao,
ICH

[Acorn]

ich, try this: CSS - Hover under.xar

Acorn

[ich]

ich, try this: CSS - Hover under.xar

Acorn

THX, I will try it and let U know

[ich]

THX, I will try it and let U know

It works perfectly.
THX !!!

[ich]

Hello Acorn,
I come back to this topic, with the following obseravtion.
Your example works in such a way that as soon as you hover over the area, the colored background appears. But that only works if the hover area is a link. As soon as no link is stored, the colored background does not appear even when hovering. It's different in the original example website, there the colored background always appears as soon as you hover over, regardless of whether a link is stored or not.
Why is this an finer solution?
One could use a "fake link" everywhere as an activator for the color field.
The problem with this is that the cursor changes shape when you hover over a link, implying a possible action for the viewer there. If the whole field is a link, the cursor is always a pointer.
The original website https://charmingplaces.de/reiseziele/shows the colored background field always once you hover, regardless of whether you have stored a link or no link. Take a look at the example page and hover over the text, it is not linked, the mouse remains original and the color field still appears. So I'm wondering, is it possible to refine your solution to that effect?

THX, ICH

[Acorn]

ich, invoking the MouseOver layer objects requires a link. You can use a "fake link". I call mine dummy links as they do nothing other than add an a <tag> into the design, allowing the MouseOver to show. Xara uses this approach in a lot of places. I set mine to be 'javascript: ;', the extra space tells me I did it and not Xara.

You original example site uses tons of JavaScript o handle all this but is is excessive.

I have managed to deliver what you ask for in two lines of CSS:

<style>
.underlay { z-index: -1; }
.default, .underlay { cursor: default; }
</style>

You need to add in a couple of ClassNames (underlay, default) and dummy links where real ones are not used.

CSS - Hover under - enhanced.xar

Acorn