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