Card by JaydipPrajapati1910
#e8e8e8
1ul { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 display: flex; 7 margin: 0; 8 padding: 0; 9} 10 11ul li { 12 list-style: none; 13 margin: 0 5px; 14} 15 16ul li a span { 17 position: absolute; 18 top: 50%; 19 left: 50%; 20 transform: translate(-50%, -50%); 21 color: #fff; 22 letter-spacing: 1px; 23 transition: .5s; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 text-align: center; 28 font-family: sans-serif; 29 font-size: px; 30 font-weight: 900; 31} 32 33ul li a { 34 text-decoration: none; 35 display: block; 36 width: 200px; 37 height: 250px; 38 background: #333; 39 padding-left: 20px; 40 transform: rotate(-30deg) skew(25deg) translate(0,0); 41 transition-duration: .5s; 42 box-shadow: -20px 20px 10px rgba(0,0,0,.5); 43} 44 45ul li a:before { 46 content: ''; 47 position: absolute; 48 top: 10px; 49 left: -20px; 50 height: 100%; 51 width: 20px; 52 background: #444; 53 transition-duration: .5s; 54 transform: rotate(0deg) skewY(-45deg); 55} 56 57ul li a:after { 58 content: ''; 59 position: absolute; 60 bottom: -20px; 61 left: -10px; 62 height: 20px; 63 width: 100%; 64 background: #444; 65 transition-duration: .5s; 66 transform: rotate(0deg) skewX(-45deg); 67} 68 69ul li a:hover { 70 transform: rotate(-30deg) skew(25deg) translate(20px,-15px); 71 box-shadow: -50px 50px 50px rgba(0,0,0,.5); 72} 73 74ul li:hover span { 75 color: #fff; 76} 77 78ul li:hover:nth-child(1) a { 79 background: #00aced; 80} 81 82ul li:hover:nth-child(1) a:before { 83 background: #097aa5; 84} 85 86ul li:hover:nth-child(1) a:after { 87 background: #53b9e0; 88} 89 90 91
729 views
729 views
MIT License