Card by xopc333
#212121
1.card { 2 position: relative; 3 display: flex; 4 width: 200px; 5 height: 320px; 6 background: #C6C6D0; 7 color: #212121; 8 box-shadow: inset 0 0 0 4px #212121; 9 transition: .6s 0.4s; 10 cursor: pointer; 11} 12 13.border { 14 position: absolute; 15 inset: 0; 16} 17 18.border line { 19 stroke-width: 4px; 20 stroke: #C6C6D0; 21 fill: none; 22 transition: .6s ease-in-out; 23} 24 25.border line.top, 26.border line.bottom { 27 stroke-dasharray: 200; 28} 29 30.border line.left, 31.border line.right { 32 stroke-dasharray: 320; 33} 34 35.logo { 36 width: 50%; 37 margin: auto; 38 fill: #212121; 39 transition: .6s; 40 opacity: 0.9; 41} 42 43.card:hover { 44 background-color: transparent; 45 transition-delay: 0s; 46} 47 48.card:hover .border line { 49 transition-delay: 0.1s; 50} 51 52.card:hover .border line.top { 53 transform: translateX(-400px); 54} 55 56.card:hover .border line.bottom { 57 transform: translateX(400px); 58} 59 60.card:hover .border line.left { 61 transform: translateY(640px); 62} 63 64.card:hover .border line.right { 65 transform: translateY(-640px); 66} 67 68.card:hover .logo { 69 transition-delay: 0s; 70 transform: scale(1.1); 71 fill: #C6C6D0; 72 filter: drop-shadow( 0 0 30px #C6C6D080); 73 opacity: 0.9; 74}
962 views
962 views
MIT License