[ { "path": "README.md", "content": "# Stunning HTML & CSS Card Animation\n\n![Thumbnail](thumbnail.png)\n\nFull tutorial here: https://www.youtube.com/watch?v=45mnmy2JUl0\n\nSliding images (not in repo): https://wirestock.io/james591\n" }, { "path": "index.html", "content": "\n\n\n \n \n \n Animated Flex Cards\n\n\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n\n\n" }, { "path": "style.css", "content": "* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: Arial, Helvetica, sans-serif;\n}\n\nbody {\n background-color: #eeeeea;\n}\n\n.wrapper {\n width: 100%;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.container {\n height: 400px;\n display: flex;\n flex-wrap: nowrap;\n justify-content: start;\n}\n\n.card {\n width: 80px;\n border-radius: .75rem;\n background-size: cover;\n cursor: pointer;\n overflow: hidden;\n border-radius: 2rem;\n margin: 0 10px;\n display: flex;\n align-items: flex-end;\n transition: .6s cubic-bezier(.28,-0.03,0,.99);\n box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);\n}\n\n.card > .row {\n color: white;\n display: flex;\n flex-wrap: nowrap;\n}\n\n.card > .row > .icon {\n background: #223;\n color: white;\n border-radius: 50%;\n width: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 15px;\n}\n\n.card > .row > .description {\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n height: 80px;\n width: 520px;\n opacity: 0;\n transform: translateY(30px);\n transition-delay: .3s;\n transition: all .3s ease;\n}\n\n.description p {\n color: #b0b0ba;\n padding-top: 5px;\n}\n\n.description h4 {\n text-transform: uppercase;\n}\n\ninput {\n display: none;\n}\n\ninput:checked + label {\n width: 600px;\n}\n\ninput:checked + label .description {\n opacity: 1 !important;\n transform: translateY(0) !important;\n}\n\n.card[for=\"c1\"] {\n background-image: url('./img1.jpeg');\n}\n.card[for=\"c2\"] {\n background-image: url('./img2.jpeg');\n}\n.card[for=\"c3\"] {\n background-image: url('./img3.jpeg');\n}\n.card[for=\"c4\"] {\n background-image: url('./img4.jpeg');\n}\n" } ]