I built this a while back but went back to refactor it.
I spent a long time trying to do fancy animations on the fact tiles (flips, slides) but found it difficult to implement with flexbox. For now I went with a simple hover highlight effect. There might be some errant css from all the fiddling I tried to do.
I can’t help but feel that my styling is a little bland. Also, for some reason H’s are rendering weird for the title font I used. I’m using Brave browser.
I would love to hear any suggestions on more intermediate css I could add as a challenge as well as overall feedback. Thank you!
Hi,
I think your page looks very good. I like its simplicity, it creates a sophisticated effect and the code you’ve used looks good.
I don’t know exactly what you want but I have found several articles about flipping an image or text and they’re always using the same trick: If you add transform: scaleX(-1) to .fact-card, the text flips around. It stays that way and you can’t really read it anymore but it has flipped. You would have to replace the text by something else and integrate that in the animation. Should be possible. I think you have to keep trying, you’ll get there in the end though it may be good to leave it for a while and get back to it with a fresh and empty head.
Greets,
Karin
thanks for the feedback. What I had in mind for the slide effect was for the title of a fact (e.g. “Birth”) to appear on the card by itself, then when the user hovers over it slides left and the fact content slides in from the right. The difficulty I found was a lot of solutions for this use absolute and relative positioning to achieve this, along with transform translate of course. I just ran into problems with the flex items spilling into eachother, but I’m sure there is some way I can get this to work with z-index or maybe a different approach entirely.
I get it. Interesting problem.
Maybe this is naive, I haven’t worked on it in detail, but that is where I would start.
I would give each .fact a separate id (or a class that .fact and corresponding .fact-title would share). You can then set their positions to relative and then use left: 100% or whatever. Then you would need to set the z-indexes above the body and each card needs to be stacked underneath the next on so they can slide underneath each other.
Greets,
Karin