Card by joe-herbert
#e8e8e8
1/*Card design*/ 2.card { 3 width: 200px; 4 height: 300px; 5 background: lightgray; 6 box-shadow: 0 4px 35px rgba(0, 0, 0, 0.2); 7 position: relative; 8 overflow: hidden; 9} 10 11.card > .child { 12 position: absolute; 13 top: 0; 14 left: 0; 15 width: 100%; 16 height: 100%; 17 transition: clip-path 0.6s; 18 z-index: 1; 19} 20 21.card .card-1 { 22 clip-path: polygon(0% 0%, 75% 0%, 0% 75%); 23} 24 25.card .card-1:hover { 26 clip-path: polygon(0% 0%, 170% 0%, 0% 170%); 27} 28 29.card .card-1:has(~ .card-2:hover), 30.card .card-1:has(~ .card-3:hover) { 31 clip-path: polygon(0% 0%, 15% 0%, 0% 15%); 32} 33 34.card .card-2 { 35 z-index: 0; 36} 37 38.card .card-3 { 39 clip-path: polygon(25% 100%, 100% 25%, 100% 100%); 40} 41 42.card .card-3:hover { 43 clip-path: polygon(-70% 100%, 100% -70%, 100% 100%); 44} 45 46.card .card-1:hover ~ .card-3, 47.card .card-2:hover ~ .card-3 { 48 clip-path: polygon(85% 100%, 100% 85%, 100% 100%); 49} 50 51/*Optional styles*/ 52.card { 53 font: 30px Arial, Helvetica, sans-serif; 54} 55 56.card > .child { 57 /*If using background image on card children*/ 58 background-size: cover; 59 background-position: center; 60 background-repeat: no-repeat; 61 transition: all 0.6s; 62} 63 64.card .card-1 { 65 background-color: #23a; 66 color: white; 67 padding-top: 30%; 68 padding-left: 20%; 69} 70 71.card .card-1:hover { 72 padding-top: 65%; 73 padding-left: 48%; 74} 75 76.card .card-2 { 77 padding-top: 65%; 78 padding-left: 48%; 79 background-color: #f16; 80} 81 82.card .card-3 { 83 padding-top: 100%; 84 padding-left: 76%; 85 background-color: #dd2; 86} 87 88.card .card-3:hover { 89 padding-top: 65%; 90 padding-left: 48%; 91} 92
54 views
54 views
MIT License