A less simple Image Hover

[Acorn]

I created an alternative to the Xara Hover Widget 2 here: https://www.talkgraphics.com/showthr...le-Image-Hover.

This one is for the Xara Hover Widget:

CSS - Hover Widget Successor.xar

The CSS Code is a tad more complex as it has to handle two directions.

It beats the Xara Hover Widget as you can actually add Links to any text underneath as I made that percolate to the top (z-index).
In doing so, it gets rid of the CSS jitter (in most cases). The Xara approach uses a lot of JavaScript to handle the movement but it is really limiting in what is revealed...

It is less simple as you also have to tweak the inset and slide distances should you change scale too much.

Acorn

[Initiostar]

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

[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

Cheers Gary, I liked the Labrador tiling effect but it looked a bit lumpy!

Acorn

[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