3.7K views
1.card { 2 width: 200px; 3 height: 250px; 4 background: #07182E; 5 border-radius: 5px; 6 text-align: center; 7 color: #f0f0f0; 8 font-family: inherit; 9 z-index: 1; 10} 11 12.img { 13 display: flex; 14 margin: 60px auto 10px auto; 15 width: 75px; 16 height: 75px; 17 border: 1px solid #f0f0f0; 18 border-radius: 50%; 19 font-size: 11px; 20 justify-content: center; 21 align-items: center; 22 transition: all 0.5s; 23 z-index: 99; 24 background-color: #152f50; 25} 26 27p { 28 opacity: 0; 29 transition: all 0.5s; 30} 31 32.heading { 33 padding: 10px; 34 font-weight: 500; 35 font-size: 18px; 36} 37 38svg { 39 padding: 0 5px; 40 cursor: pointer; 41} 42 43.card:hover .img { 44 transform: scale(1.1); 45 border: 1px solid #f0f0f0; 46} 47 48.card:hover h1, 49.card:hover p { 50 opacity: 1; 51}
MIT License