How to make this Flipping card happen in the xara web designer?

**gwpriester** · 24 January 2017, 12:56 AM

Acorn - I don't think the Hover 1 Link is the answer. Is there some way given the information from the site linked to that you can build a module that will work?

You can use Web Animation and have one shape flip to a second object but the second object does not flip back.

**Egg Bramhill** · 24 January 2017, 02:33 AM

I think Acorn is just saying it CAN be done but is it really worth that effort when a very similar effect can be done very easily using the Hover widgets?

**Acorn** · 24 January 2017, 06:32 AM

Originally Posted by Egg Bramhill

I think Acorn is just saying it CAN be done but is it really worth that effort when a very similar effect can be done very easily using the Hover widgets?

+1 Egg. It is mainly the vendor code detail that is awkward. There are site that claim to help but browsers change so the CSS could break and then you have a duff widget. If I did the initial legwork, I would be welded to its capability therafter (but only when it goes wrong).

Acorn

**alexia36** · 24 January 2017, 12:25 PM

Hi Acorn,

It seems complicate to do it, right?

Alexia

**alexia36** · 24 January 2017, 12:28 PM

Check out this website, the riders' list is cool.

http://www.dakar.com/dakar/2017/us/r...ers-bikes.html

I hope that my members website have this kind of effect.

Alexia

**RKissane** · 24 January 2017, 01:39 PM

Alexia,

I really do not understand why you want the picture to flip. Are you trying to show some other information on the back side or are you just wanting the look of flipping.

As far as the last link that you posted, the effect as used on this page does nothing for me personally. The reason is because you go from a larger picture and then the picture flips and now shows a thumb nail shot of the same picture. To me, this does not accomplish anything. I am all for graphic effects and actions on the page but it should lead to some overall reason. If the reason is just because you think it is cool, that is fine but from a visitors perspective it may not make much of a difference. Then you have to ask yourself, is this something you want to invest the time into to accomplish.

Ray

**siran** · 24 January 2017, 01:44 PM

I tried to create a widget from it.
Drag the file widget_dwFlip_v1.xar to your design, resize the widget to your needs and edit it to change the content. You can also give it a link the usual way.
When editing you will find two groups which represent the front and back of the widget.
See example file.
Don't blame me if it doesn't work as expected. I just copied the css from the given link and removed some stuff.
To change the speed of the flipping you will have to edit the css file in the widget file and re-import it...

**alexia36** · 24 January 2017, 08:37 PM

Siran,

Thanks your effort for this widget, this helps me a lot to do the whole project, original maybe have to waste 2 or 3 screen to browser it, but this way I can use one screen to display the group . Thank you so much.

Best,

Alexia