5.8K views
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 background: #f00; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9} 10 11.card::before { 12 content: ''; 13 position: absolute; 14 top: 0; 15 left: 0; 16 width: 100%; 17 height: 100%; 18 background: linear-gradient(315deg,#03a9f4,#ff0058); 19} 20 21.card::after { 22 content: ''; 23 position: absolute; 24 top: 0; 25 left: 0; 26 width: 100%; 27 height: 100%; 28 background: linear-gradient(315deg,#03a9f4,#ff0058); 29 filter: blur(30px); 30} 31 32.card b { 33 position: absolute; 34 inset: 6px; 35 background: rgba(0, 0, 0, 0.6); 36 z-index: 2; 37} 38 39.card img { 40 position: absolute; 41 z-index: 3; 42 scale: 0.8; 43 opacity: 0.25; 44 transition: 0.5s; 45} 46 47.card:hover img { 48 scale: 0.5; 49 opacity: 0.9; 50 transform: translateY(-70px); 51} 52 53.card .content { 54 position: absolute; 55 z-index: 3; 56 bottom: 0; 57 display: flex; 58 flex-direction: column; 59 align-items: center; 60 transform: scale(0); 61 transition: 0.5s; 62} 63 64.card:hover .content { 65 transform: scale(1); 66 bottom: 25px; 67} 68 69.content .title { 70 position: relative; 71 color: #fff; 72 font-weight: 500; 73 line-height: 1em; 74 font-size: 1em; 75 letter-spacing: 0.1em; 76 text-transform: uppercase; 77 text-align: center; 78} 79 80.content .title span { 81 font-weight: 300; 82 font-size: 0.70em; 83} 84 85.content .sci { 86 position: relative; 87 display: flex; 88 justify-content: center; 89 align-items: center; 90 gap: 8px; 91 margin-top: 5px; 92} 93 94.sci li { 95 list-style: none; 96} 97 98.sci li .fa-brands { 99 width: 14px; 100} 101 102.sci li .fa-facebook { 103 width: 10px; 104} 105 106.sci li a { 107 position: relative; 108 text-decoration: none; 109 color: rgba(255, 255, 255, 0.5); 110 background: rgba(0, 0, 0, 0.2); 111 fill: currentColor; 112 width: 30px; 113 height: 30px; 114 display: flex; 115 justify-content: center; 116 align-items: center; 117 border-radius: 4px; 118 transition: 0.5s; 119} 120 121.sci li a:hover { 122 fill: currentColor; 123 color: rgba(255, 255, 255, 1); 124} 125
Daniel1227k
L-Danny
MIT License