Objectives1. Make this card fold in half and "close", like a book.
2. On hover it must open to show the content.
*BONUS* Add some extra pages.
my approachI pretty much stuck to the design as it is but personalized it a little with my own photos/name and the date I worked on it. The challenge requirements seemed a bit odd to me, though - the interaction, anyway. Hovering to show the card? Bleh - not a fan of hovering when it means hiding useful information rather than adding additional content (tips, etc). If it's theoretically an article card, I'd imagine that it'd already be displaying - interactions should be added upon it; not to reveal it. Since it's a teaser, it might be better to do that action for the read more function instead.
As far as the code went, I debated on the best way to handle the skewed side of the left panel and doing most of the animation with CSS3. There were a few of ways I could imagine accomplishing this but in the end I went with a similar approach that I take with ribbons on cards.
&:after content: '' height: 100% width: 90px background: #fff position: absolute top: 0 right: -49px -webkit-transform: skew(10deg) -moz-transform: skew(10deg) -o-transform: skew(10deg) z-index: -9
css3I used the skew method to get the side slanted like in the design. By adding the pseudo, :after for .left-side it becomes hooked onto that class. Next up were the animations, two classes were created: .animation-in and .animation-out to toggle when the close button is clicked. I added transform: scaleX(-1) translateX(-100px) to create the illusion of the page turning. It currently just flips the text too and my next step would be to make it show as more of a book cover at the midpoint before it completely flips. However, I do like doing these write ups right after I've worked on these challenges in the allotted time for my own learning purposes. Plus, it's pretty cool looking back on these and seeing how much more efficient I become with tasks like this.
The goal is to only spend 1-2 hours on these.