Card by AbanoubMagdy1
#e8e8e8
1.card { 2 border: .05rem solid black; 3 height: 210px; 4 width: 180px; 5 overflow: hidden; 6 position: relative; 7} 8 9.card:hover .img1 { 10 transform: scale(1.5, 1.2) translate(5px, -30px) rotate(5deg); 11} 12 13.card:hover .img1::before { 14 transition: transform 1s 0.4s; 15 transform: translateX(400px) skewX(-10deg); 16} 17 18.card:hover .img2 { 19 transform: translateY(120%); 20} 21 22.card .img { 23 position: absolute; 24 width: 100%; 25 height: 50%; 26 background: linear-gradient(180deg, rgb(65, 122, 255), rgb(23, 65, 193)); 27 background-size: 100% 200%; 28 transition: 0.3s all; 29} 30 31.card .img1 { 32 top: 0; 33 right: 0; 34 position: relative; 35} 36 37.card .img1::before { 38 content: ""; 39 position: absolute; 40 top: 0; 41 left: -25px; 42 height: 100%; 43 width: 10px; 44 transform: skewX(-10deg); 45 background-image: linear-gradient(to right, rgb(32, 151, 248), rgba(255, 255, 255, 0.9)); 46} 47 48.card .img2 { 49 bottom: 0; 50 right: 0; 51 background-position: bottom center; 52} 53 54.card__content { 55 margin-left: 1rem; 56 margin-top: 1rem; 57 transform: translateX(-130%); 58 transition: .5s ease-in-out transform .3s; 59 position: relative; 60 z-index: -1; 61} 62 63.card__content span { 64 display: block; 65} 66 67.card__content .name { 68 font-weight: bold; 69 font-size: 1.7rem; 70} 71 72.card__content .job { 73 color: #B2B2B2; 74} 75 76.card:hover .card__content { 77 transform: translateX(0); 78}
1.9K views
1.9K views
MIT License