I am trying to create a hover transition on my comedy site. It is for the Past Shows page. What I want is to see the original poster image of the show as a 300x300 card that, when hovered over, flips over to show the backside with three things to click on: Watch, See Lineup, and Listen. Each of these would then link to other pages in my site or to an external page. I cannot seem to find the correct way to do this. I watched the video on cardflips, but it seems like there were things in the setup that I did not catch. Similarly, i tried to read the help documentation on this, but the instructions were completely different from the video. I can’t seem to get to the second card, the backside, to actually work with links. I sort of jerry-rigged it now,but when I preview the page the backside disappears quickly, you can’t actually view it and click on something because it only flips for a second.
It is possible to have a divblock flip over to show another divblock, that has nested links within it? If so, how is the proper way of doing so? Am I missing something in the help and setup?
I’m sending my public link so that you can take a look at the way I did a card flip. Now, I was just goofing around with it, as I was with everything on that page, so judge it lightly.
In my shared site, go to the “test layouts” page, and scroll down a bit until you see four side-by-side images with Side 1 on them. In the preview mode, you’ll see them flip around to expose Side 2 which includes a button link.
One thing I discovered in the video tutorial is that they had the flip trigger on the actual div that was turning on the y-axis. The problem with that was once the div began to turn, when it was at 90 degrees, the cursor wasn’t over the trigger anymore unless it was in the exact center. This resulted in a not-very-smooth transition. So I wrapped the turning div inside the trigger div so that as long as your cursor is over the unmoving trigger div, the rotation is smooth.
Using this method, you assign the turn to a different element and select “nested elements” to make sure they don’t all turn at the same time.
Edit: Be aware that Internet Explorer does not support the card flip function. It does not show the other side. That’s why I couldn’t use this on my actual site.
Thank you for the link, but this was actually the help article that got me confused. I followed the steps shown in the article, but the end result doesn’t actually work for what I am wanting. The examples they show are just with card images, and flipping the images around. What I would like is to have the front card be a single image, and the back card be that same image but with a dark gray overlay and on this card back have three links that someone can click. I can make the cards flip, but now i cannot have the front card show up properly at all and when I hover over the backside flips over to show the text links going right to left, or it will flip for a moment and then disappear. As the tutorial is only 3 steps, I cannot quite figure out what I did wrong in one of those steps. I’ve shared my public link, in case anyone could take a look at that page (the Past Shows Page) to see what setting I am missing.
I apologize if I am not explaining this well. I am not a web designer, I am a comedian who loves webflow for the potential of being able to do everything yourself. Sometimes it gets you into dead ends though.
I was having the same problem where the card flip was not at all smooth. Putting one div inside another worked for me too. Also, for anyone else who needs help implementing this, here are two screenshots on my setup looks.
These instructions are very helpful. My card is flipping, however, I’m having trouble where if the mouse moves while the transformation is animated, it stutters badly. Any ideas on how to resolve this:
Yes, ctotty’s idea will fix your problem… put one div inside another. My original response expands on ctotty’s post.
Edit: and if you already did that, maybe try making sure you haven’t applied the effect on two elements inside the div.
@rgoldiez,
Hi,
You’re headed in the right direction, but you need to make the trigger that you currently have on “Application Card” affect the elements inside of it, rather than affecting itself.
I’m at work right now, so I can go into detail, but open up your trigger and select “Affect Different Elements” and “Nested Elements” and choose “Card Front” as the element to be acted upon. I think you’re going to have to restructure what’s inside your trigger div a bit differently, but as I said, I’m not able to give specifics now.
Feel free to look back at my public link and see the structure I used.
That worked! Thanks. I added a new Div as an outer wrapper around the “Application Card”, applied the interaction on this new, outer Div, and set it to apply to the Application Card (nested elements only).
Now, a related question… on a mobile/touch device, the first touch does indeed flip the card over, but a subsequent touch does not unless that touch is on another card (that flips and causes the original to flip back). Any idea how to get the same intent on a mobile/touch device?
@rgoldiez,
No, I haven’t tried to make it work on mobile yet. I had to take it off my site because it doesn’t work with IE, so I haven’t delved into solutions for mobile.
