When the mouse hovers on the card which contains images or paragraphs, the description will slide to top to show the information,meanwhile the image zooms in with animations.
This is a demo purly with CSS3.
Step1:
Link the style.css in the head.
 |
| head |
Step2:
HTML
The card should be four parts: card_thumb, card_data,card_body and card_footer.
All the words in the card_body split to for sections.
 |
| html |
Step3:
CSS
Basic reset for body and link the font-family from google fonts.
 |
| css1 |
To make sure the card in the center of the brower. When hovering, the outside of the card should be more box-shadow with animations.
 |
| css2 |
The date in the circle at the right corner of the card is placed absolute.
 |
| css3 |
The thumb is the image. And when users hover the image, the scale changes from 1 to 1.2,and the opacity reduces half transparent, and the thumb height narrows to half in 0.5 seconds.
 |
| css4 |
The description should be hidden at first,so the opacity is 0,and the translateY is positive pixels. When hovering, the opacity turns normal height,and the translateY sets to 0px. Then the footer fixed at the bottom with icons linked from the site http://code.ionicframework.com .
 |
| css5 |
 |
| css6 |
