A less simple Image Hover

[Acorn]

Thanks for sharing all these ideas Acorn,
I liked the simple Image hover, this works well too - just needed to get my mind round rem units. I've grouped all these reveal ideas together; collectively, to me anyway, they avoid unnecessary popups.
I don't use any Xara widgets and I cannot think of one that cannot be replaced. All the sliders and galleries can be replaced with better solutions (mostly yours!). Here's one from last week:https://www.dstiling.co.uk/portfolio.htm
Gary

Gary, I too felt my attempt was very rough so i have reworked it to bypass any dimensions by moving to percentages.

CSS - Hover Widget Successor - Refreshed.xar

I have added a Left & Right reveal.
The image ClassNames are now:

• htmlclass="up"
• htmlclass="right"
• htmlclass="down"
• htmlclass="left"

To make control easier, I have introduced CSS Variables so only the :root definitions need be played with:
:root {
--up: 25%;
--right: 25%;
--down: 25%;
--left: 25%;
--speed: 512ms;
}

In summary, the Xara Hover Widget's limited functionality has been enhanced:

• The image slide depth is completely adjustable.
• The reveal speed can be altered to the milliSecond.
• What is placed under the reveal is anything you and your XDA can present.
• If text is given a ClassName of htmlclass-"textbox", then it will pop above the image so any Link can be selected.

Acorn