Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

Creating a flip card struggles

At a glance

A community member is new to Webstudio and is trying to recreate a flip card animation from a tutorial. They have the image flipping, but the animation keeps playing when the mouse moves over the image area. They also cannot create a blank background to put text in. Another community member suggests copying the code from the tutorial and adapting it for Webstudio, which seems to work but feels "hacky". The community members discuss the possibility of being able to directly paste CSS code into Webstudio, which is mentioned as a feature on the roadmap.

Useful resources
bbadger
·
Hey guys I'm new to Webstudio, I'm trying to recreate the flip card from this tutorial https://www.w3schools.com/howto/howto_css_flip_card.asp I have got the image flipping but when the mouse is moved inside the image area the "flip" animation tries to play over and over again and I cannot seem to create a blank background to put the text in it. Is this animation possible in Webstudio?
M
b
J
4 comments
MMilan Boisgard | Uncode School
If you copy all the code in an HTML embed it works fine.

I should work too in Webstudio you just add to adapt the code with the style panel !

Suggestion : I don't know if it's possible, but it should be great to copy a random CSS code and paste it on Webstudio and it add the CSS code on the Style panel directly. But I don't know if it's really possible to do that...
bbadger
@Milan Boisgard | Uncode School Thanks it does work, feels a bit 'hacky' but as long as it works, I got my version working to the point where it does everything but the card tries to start the flip animation over when the mouse is move along the image while it is flipping. Your solution turns smoothly thank you!
MMilan Boisgard | Uncode School
Great! For sur you can adapt it if you need something more « native » to Webstudio !
JJohn Siciliano
paste css is on the roadmap! https://github.com/orgs/webstudio-is/projects/11?pane=issue&itemId=67050551
Add a reply
Sign up and join the conversation on Discord