457 views
CSSAdd prefixes
1.card { 2 width: 190px; 3 height: 254px; 4 overflow: visible; 5 cursor: pointer; 6} 7 8.card::before, .content { 9 border-radius: 5px; 10 box-shadow: 0px 0px 5px 1px #00000022; 11 transition: transform 300ms, box-shadow 200ms; 12} 13 14.card::before { 15 position: absolute; 16 content: ' '; 17 display: block; 18 width: 100%; 19 height: 100%; 20 background-color: #ee9933; 21 transform: rotateZ(5deg); 22} 23 24.description { 25 width: 100%; 26 text-align: center; 27 margin-top: 20px; 28} 29 30.info { 31 color: #00000066; 32} 33 34.price::before { 35 content: '$'; 36} 37 38.price { 39 font-weight: bold; 40 color: #ee9933; 41} 42 43.description p { 44 margin-bottom: 10px; 45} 46 47.card .content { 48 position: absolute; 49 width: 100%; 50 height: 100%; 51 background-color: white; 52 padding: 20px; 53 display: flex; 54 flex-direction: column; 55 align-items: center; 56 transform: rotateZ(-5deg); 57} 58 59.content .img { 60 width: 150px; 61 height: fit-content; 62} 63 64.card:hover::before, .card:hover .content { 65 transform: rotateZ(0deg); 66} 67 68.card:active::before, .card:active .content { 69 box-shadow: none; 70}
HTML
1<div class="card"> 2 <div class="content"> 3 <svg xml:space="preserve" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" width="800px" height="800px"> 4 <g> 5 <path d="M170.207,358.652H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254 6 c0,20.721,16.194,37.519,36.169,37.519l198.511,14.958L170.207,358.652z" style="fill:#D33D3D;"></path> 7 <path d="M462.058,358.652H342.483l-74.863,89.721l194.438-8.429c19.975,0,36.169-16.798,36.169-37.519 8 v-6.254C498.226,375.45,482.032,358.652,462.058,358.652z" style="fill:#D33D3D;"></path> 9 </g> 10 <g> 11 <path d="M435.773,231.163h55.511c10.278-1.948,23.917-11.214,17.415-48.429 12 C487.824,84.147,395.409,9.839,284.57,9.839h-57.14c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334 13 h378.629" style="fill:#EFAC52;"></path> 14 <path d="M512,450.035v-4.588c0-3.04-2.464-5.503-5.503-5.503H277.226c-1.631,0-3.18,0.724-4.224,1.978 15 l-17.355,20.798l-17.049-20.766c-1.045-1.272-2.605-2.01-4.252-2.01H5.503c-3.04,0-5.503,2.463-5.503,5.503v4.658 16 c0.003,0.178,0.013,0.365,0.024,0.499l0.023,0.428l-0.02,0.372c-0.015,0.187-0.024,0.374-0.028,0.63v11.408 17 c0.003,0.181,0.013,0.368,0.024,0.492l0.023,0.438l-0.02,0.368c-0.015,0.187-0.024,0.376-0.028,0.63v13.913 18 c0,12.615,9.895,22.877,22.058,22.877h467.886c12.161,0,22.056-10.263,22.056-22.877v-13.982c-0.002-0.185-0.013-0.37-0.023-0.514 19 l-0.024-0.415l0.021-0.376c0.014-0.187,0.024-0.374,0.026-0.625v-11.406c-0.002-0.187-0.013-0.372-0.023-0.51l-0.024-0.424 20 l0.022-0.381C511.987,450.467,511.998,450.282,512,450.035z" style="fill:#EFAC52;"></path> 21 </g> 22 <g> 23 <path d="M84.182,394.634c4.558,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727 24 C75.927,390.939,79.622,394.634,84.182,394.634z" style="fill:#E95353;"></path> 25 <path d="M135.83,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727 26 C127.575,390.939,131.271,394.634,135.83,394.634z" style="fill:#E95353;"></path> 27 <path d="M373.42,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727 28 C365.165,390.939,368.86,394.634,373.42,394.634z" style="fill:#E95353;"></path> 29 <path d="M416.814,358.652v27.727c0,4.56,3.696,8.255,8.255,8.255c4.56,0,8.255-3.695,8.255-8.255v-27.727 30 H416.814z" style="fill:#E95353;"></path> 31 </g> 32 <g> 33 <path d="M92.552,294.842c-1.849,0-3.71-0.62-5.248-1.888l-35.298-29.116l-35.322,29.095 34 c-3.519,2.898-8.722,2.395-11.62-1.125c-2.9-3.519-2.397-8.722,1.123-11.62l40.574-33.419c3.049-2.513,7.453-2.511,10.501,0.002 35 l40.548,33.446c3.517,2.902,4.015,8.104,1.116,11.622C97.293,293.818,94.932,294.842,92.552,294.842z" style="fill:#7DC44E;"></path> 36 <path d="M94.551,296.426c-1.863,0-3.728-0.63-5.251-1.888l-40.552-33.442 37 c-3.518-2.9-4.016-8.102-1.117-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.116l35.318-29.095 38 c3.519-2.898,8.722-2.395,11.622,1.123c2.898,3.519,2.395,8.722-1.125,11.622l-40.569,33.419 39 C98.277,295.798,96.413,296.426,94.551,296.426z" style="fill:#7DC44E;"></path> 40 <path d="M175.675,296.45c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444 41 c-3.519-2.9-4.017-8.102-1.118-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.114l35.318-29.093 42 c3.518-2.898,8.722-2.397,11.62,1.123c2.899,3.519,2.397,8.722-1.123,11.622l-40.569,33.419 43 C179.399,295.822,177.537,296.45,175.675,296.45z" style="fill:#7DC44E;"></path> 44 <path d="M256.797,296.473c-1.862,0-3.727-0.63-5.251-1.888l-40.555-33.444 45 c-3.517-2.9-4.017-8.102-1.116-11.62c2.9-3.519,8.102-4.017,11.62-1.118l35.305,29.116l35.32-29.097 46 c3.519-2.898,8.722-2.397,11.622,1.123c2.898,3.519,2.395,8.722-1.124,11.622l-40.571,33.421 47 C260.52,295.846,258.659,296.473,256.797,296.473z" style="fill:#7DC44E;"></path> 48 <path d="M338.238,296.497c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444 49 c-3.519-2.9-4.017-8.102-1.118-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.114l35.318-29.095 50 c3.519-2.898,8.722-2.397,11.621,1.123c2.899,3.519,2.396,8.722-1.123,11.622l-40.569,33.421 51 C341.961,295.87,340.099,296.497,338.238,296.497z" style="fill:#7DC44E;"></path> 52 <path d="M419.36,296.518c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444 53 c-3.519-2.9-4.017-8.102-1.118-11.62c2.901-3.519,8.104-4.017,11.622-1.118l35.303,29.116l35.325-29.097 54 c3.519-2.898,8.722-2.397,11.62,1.123c2.9,3.519,2.397,8.722-1.123,11.622l-40.576,33.421 55 C423.083,295.891,421.221,296.518,419.36,296.518z" style="fill:#7DC44E;"></path> 56 <path d="M500.477,296.54c-1.851,0-3.71-0.62-5.25-1.888l-40.545-33.444c-3.517-2.9-4.016-8.104-1.116-11.622 57 c2.901-3.517,8.104-4.015,11.622-1.116l40.546,33.444c3.517,2.902,4.016,8.104,1.116,11.622 58 C505.218,295.516,502.856,296.54,500.477,296.54z" style="fill:#7DC44E;"></path> 59 </g> 60 <path d="M347.468,356.319c-0.905-1.935-2.849-3.171-4.985-3.171H170.207c-2.129,0-4.065,1.227-4.975,3.149 61 c-0.909,1.924-0.628,4.2,0.722,5.846l85.441,104.068c1.04,1.268,2.591,2.005,4.231,2.012c0.008,0,0.015,0,0.022,0 62 c1.631,0,3.18-0.724,4.227-1.978l86.835-104.068C348.078,360.537,348.374,358.254,347.468,356.319z" style="fill:#FCAF29;"></path> 63 <path d="M22.564,181.828C43.807,83.691,136.003,9.839,246.507,9.839 64 H227.43c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334h19.077 65 C12.718,231.163,22.564,181.828,22.564,181.828z" style="opacity:0.15;fill:#202020;enable-background:new ;"></path> 66 <g style="opacity:0.15;"> 67 <path d="M19.079,479.283V465.37c0.002-0.253,0.013-0.442,0.026-0.63l0.021-0.368l-0.023-0.438 68 c-0.011-0.124-0.022-0.311-0.024-0.492v-11.408c0.002-0.255,0.013-0.442,0.026-0.63l0.021-0.372l-0.023-0.428 69 c-0.011-0.133-0.022-0.32-0.024-0.499v-4.658c0-3.04,2.463-5.503,5.503-5.503H5.503c-3.04,0-5.503,2.463-5.503,5.503v4.658 70 c0.003,0.178,0.013,0.365,0.024,0.499l0.023,0.428l-0.02,0.372c-0.015,0.187-0.024,0.374-0.028,0.63v11.408 71 c0.003,0.181,0.013,0.368,0.024,0.492l0.023,0.438l-0.02,0.368c-0.015,0.187-0.024,0.376-0.028,0.63v13.913 72 c0,12.615,9.895,22.877,22.058,22.877h19.077C28.974,502.161,19.079,491.898,19.079,479.283z" style="fill:#202020;"></path> 73 </g> 74 <g> 75 <path d="M32.85,402.424v-6.254 76 c0-20.721,16.196-37.519,36.171-37.519H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254c0,20.721,16.194,37.519,36.169,37.519 77 h19.079C49.046,439.944,32.85,423.145,32.85,402.424z" style="opacity:0.15;fill:#202020;enable-background:new ;"></path> 78 <path d="M185.031,362.143c-1.351-1.644-1.631-3.922-0.722-5.846 79 c0.911-1.922,2.849-3.149,4.976-3.149h-19.079c-2.129,0-4.065,1.227-4.975,3.149c-0.909,1.924-0.628,4.2,0.722,5.846 80 l85.441,104.068c1.04,1.268,2.591,2.005,4.231,2.012c0.008,0,0.015,0,0.022,0c1.631,0,3.18-0.724,4.227-1.978l5.355-6.419 81 L185.031,362.143z" style="opacity:0.15;fill:#202020;enable-background:new ;"></path> 82 </g> 83 <path d="M498.226,346.545c0,7.294-5.913,13.208-13.208,13.208H26.982c-7.295,0-13.208-5.914-13.208-13.208 84 v-20.662c0-7.294,5.913-13.208,13.208-13.208h458.037c7.295,0,13.208,5.914,13.208,13.208L498.226,346.545L498.226,346.545z" style="fill:#8C5549;"></path> 85 <path d="M32.85,345.444v-20.662c0-7.294,5.914-13.208,13.208-13.208 86 H26.982c-7.295,0-13.208,5.914-13.208,13.208v20.66c0,7.294,5.913,13.208,13.208,13.208h19.077 87 C38.764,358.652,32.85,352.739,32.85,345.444z" style="opacity:0.15;fill:#202020;enable-background:new ;"></path> 88 </svg> 89 <div class="description"> 90 <p class="title"> 91 <strong>Spicy Burger</strong> 92 </p> 93 <p class="info"> 94 30 Min | 165 Sell 95 </p> 96 <p class="price"> 97 2.50 98 </p> 99 </div> 100 </div> 101</div>