Card by igoramos77
#212121
1.container { 2 position: relative; 3 height: 300px; 4 background: #6c23c0; 5 padding: 2rem; 6 border-radius: 8px; 7 transition: all .25s ease-in-out; 8} 9 10.container:hover { 11 box-shadow: 0 4px 50px #00000020; 12} 13 14.container:hover .card { 15 transform: translateY(-5%); 16} 17 18.info { 19 margin-top: 1rem; 20} 21 22.info h2, p { 23 color: #fff; 24 text-align: center; 25} 26 27.card { 28 transition: all .25s ease-in-out; 29} 30 31.card input { 32 display: none; 33} 34 35.card main { 36 position: relative; 37} 38 39.card main a svg { 40 width: 120px; 41 height: 120px; 42 border-radius: 50%; 43 border: 4px solid rgb(108, 35, 192); 44} 45 46.card main a { 47 position: relative; 48 display: flex; 49 align-items: center; 50 justify-content: center; 51 padding: 8px; 52 background-image: linear-gradient(to right, rgb(23, 122, 250) 20%, rgb(3, 240, 209)); 53 border-radius: 50%; 54 overflow: hidden; 55} 56 57.card main a:hover::after { 58 opacity: 1; 59} 60 61.card main a::after { 62 content: "Change"; 63 position: absolute; 64 width: 100%; 65 height: 35%; 66 left: 0px; 67 bottom: 0px; 68 background-image: linear-gradient(transparent 0%, rgba(108, 35, 192, 0.584) 100%); 69 display: flex; 70 justify-content: center; 71 align-items: center; 72 color: rgb(255, 255, 255); 73 opacity: 0; 74 transition: all 0.2s ease-in-out 0s; 75 padding-bottom: 1rem; 76} 77 78.card span { 79 position: absolute; 80 bottom: 5px; 81 right: 5px; 82 background: rgb(119, 255, 170); 83 width: 35px; 84 height: 35px; 85 border-radius: 50%; 86 display: flex; 87 justify-content: center; 88 align-items: center; 89 border: 4px solid rgb(108, 35, 192); 90 color: rgb(108, 35, 192); 91}
3.7K views
3.7K views
MIT License