A simple Image Hover

This design arose from an observation that a mouse-over effect requires a MouseOff object must have more than half overlap with a MouseOver object and include a link for a pop-up to occur. I have always assumed this was a self-evident truth.

If you want an object to pop-up regardless of where the MouseOff object is positioned, you have to use Xara's Web Animation > Mouse-over function AND place the desired objects into a separate Layer.
My design is not a carousel.

This design is a half-way house. It avoids the need for many Layers.
It uses a very simply CSS coding to fade in an image (actually any simple object or Grouped objects) gradually when hovering over a thumbnail.
If you want fancier reveals, you can refer to my series on available Xara animations through CSS code access.
The thumbnail can be any simple object or Grouped object, expect for text.

I have used javascript: ; for the Link but you can use anything you desire.
I have one thumbnail with no Link but instead I added a separate Xara animation.
Another has an external Link, so the design is quite versatile.

Attachment 130416

Acorn

Very smooth fades. Nice.

Really like that Acorn, makes a great but simple slideshow. Saved to my Gooodies folder. Thanks.

Here's an example of your xar in use. 36 different images all on the same layer.

EXAMPLE

Thanks, Acorn, nice widget! Very useful.

And nice example, Egg!

Quote:

---

Originally Posted by Egg Bramhill

Here's an example of your xar in use. 36 different images all on the same layer.
EXAMPLE

---

Nicely done Egg.

The nice thing is it also works on a SmartPhone with a touch acting as a hover+hold so the central image stays open.
To do the same on the desktop might require CSS of a:hover + .toBeRevealed, a:focus + .toBeRevealed { opacity: 1; }.
A quick try seems to show it works but the second hover image either works or doesn't, depending on its stacking order in the browser DOM.

Acorn

I'd noticed the nice fit on smart phones.

I've amended the link above with the new code. It works well apart from the mouse over on ealier (lower) images fails as you stated. It becomes more an on-click action.