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

**alexia36** · 23 January 2017, 11:32 AM

Hi,

Does someone know how to make this Flipping card animation happen in XARA web designer?

https://davidwalsh.name/demo/css-flip.php

Styled Card (Horizontal Flip)

Alexia

**gwpriester** · 23 January 2017, 12:47 PM

I think that Acorn will have an idea.

**Acorn** · 23 January 2017, 05:43 PM

Originally Posted by gwpriester

I think that Acorn will have an idea.

It is fairly complicated. The front and back objects would be Named. Then there would be a Placeholder with the HTML code in its body. Then JavaScript or jQuery to place the Named objects in-line to the HTML code. Finally, the CSS would be put in the Placeholder in its head; the vendor prefixes.

My idea is not to bother. Experiment with the Hover 1 Link Photo Hover in the On-line Content Catalogue.

Acorn

**alexia36** · 23 January 2017, 07:40 PM

Hi Acorn,

Would you give me an example because I need to do a page including twenty members,
and I can following your structure. Thanks!

Alexia

**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