Image with hover

**Steve2106** · 13 January 2015, 03:45 PM

Hi There,

I Need your help please.

I am trying to put a image on a page and when I hover over the image I would like a rectangle to slide over the image.
I have almost got this working but the rectangle slides down from the top of the page rather than the top of the image.

Is there a way to fix it so that the rectangle only slides from the top of the image?

Thanks for your help.

Best Regards,

**gwpriester** · 13 January 2015, 05:37 PM

Not using a layer transition. Transitions enter and exit from the sides of the screen.

I would just place the rectangle on either a pop up layer or mouse over layer and trigger the rectangle with something on the mouseoff layer. You could use a fade transition which might be just as effective and does not enter or exit from the side.

**steve.ledger** · 13 January 2015, 07:55 PM

Can be done with trickery

It can be achieved through using an iframe which loads a prepared page with image and mouse-over layer with transition.The trick is to make the iframe placeholder larger than the image so that there's an empty area for the mouse-off event, otherwise the layer doesn't retract.

Demo ► http://xara-users.magix.net/public/i...er-transition/

*Note that IE9 or lower the transition is instant.

**Egg Bramhill** · 14 January 2015, 09:55 AM

Nice solution

**Steve2106** · 14 January 2015, 03:57 PM

Thanks guys,

I'll give it a go and see what I come up with.

I am trying to replicate the tiles you can see on this site: http://www.bluefingroup.co.uk/

Not sure how it's done.

Best Regards,

**Acorn** · 14 January 2015, 05:15 PM

Originally Posted by Steve2106

Thanks guys,

I'll give it a go and see what I come up with.

I am trying to replicate the tiles you can see on this site: http://www.bluefingroup.co.uk/

Not sure how it's done.

Best Regards,

It is probably a CSS3 transition effect.
Here is a demonstration: http://jsfiddle.net/realseanp/c4e08hy7/9/

Acorn

**steve.ledger** · 14 January 2015, 08:02 PM

As are WD10's transition effects.

**Acorn** · 15 January 2015, 02:57 PM

Originally Posted by steve.ledger

As are WD10's transition effects.

No dispute with that but you have no control in Xara over changing the effect to match what the OP specified.
Acorn

**steve.ledger** · 15 January 2015, 06:48 PM

Originally Posted by Acorn

No dispute with that but you have no control in Xara over changing the effect to match what the OP specified.
Acorn

The OP specified:

Originally Posted by Steve2106

I have almost got this working but the rectangle slides down from the top of the page rather than the top of the image.

Is there a way to fix it so that the rectangle only slides from the top of the image?

Did you actually look at the demo and file I posted?

**Acorn** · 15 January 2015, 09:37 PM

Originally Posted by steve.ledger

The OP specified:

Did you actually look at the demo and file I posted?

Steve, I did. Essentially, you get round the the transition from the top of a page by making the image and its page the same size and then hiding this within an IFRAME. The transition then reveals a small rectangle that then covers about 40% of the image.
This affirms that Xara, natively, cannot do what the OP asked about.
The OP cited a web site that demonstrated a transition from bottom of a partially revealed rectangle, which also changed its opacity.

I mentioned CSS3 transitions; you stated Xara used these. I felt your "trickery" was not a full answer and simply referred back to what the OP seemed to be after in his Post #5.
You answered his original Post; I was addressing his Post #5.

Hope we're good,
Acorn