Card by MuhammadHasann
#e8e8e8
1.card { 2 position: relative; 3 background: transparent; 4 width: 300px; 5 height: 300px; 6 border: none; 7} 8 9.card:hover { 10 width: 300px; 11} 12 13.card .container-image { 14 position: absolute; 15 top: 50%; 16 left: 50%; 17 transform: translate(-50%, -50%); 18 background: #e7e7e7; 19 width: 190px; 20 height: 190px; 21 cursor: pointer; 22 border: none; 23 border-radius: 50%; 24 box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff; 25 transition: all .3s ease-in-out, opacity .3s; 26 transition-delay: .6s, 0s; 27} 28 29.card:hover .container-image { 30 opacity: 0; 31 border-radius: 8px; 32 transition-delay: 0s, .6s; 33} 34 35.card .container-image .image-circle { 36 position: absolute; 37 top: 50%; 38 left: 50%; 39 transform: translate(-50%, -50%); 40 width: 125px; 41 height: auto; 42 object-fit: contain; 43 filter: drop-shadow(2px 2px 2px #1818188a); 44 transition: all .3s ease-in-out; 45 transition-delay: .4s; 46} 47 48.card:hover .container-image .image-circle { 49 opacity: 0; 50 transition-delay: 0s; 51} 52 53.card .content { 54 display: flex; 55 justify-content: space-between; 56 align-items: center; 57 position: absolute; 58 top: 50%; 59 left: 50%; 60 transform: translate(-50%, -50%); 61 background: #e7e7e7; 62 padding: 20px; 63 width: 190px; 64 height: 190px; 65 cursor: pointer; 66 border: none; 67 border-radius: 8px; 68 box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff; 69 visibility: hidden; 70 transition: .3s ease-in-out; 71 transition-delay: 0s; 72 z-index: 1; 73} 74 75.card:hover .content { 76 width: 290px; 77 height: 190px; 78 visibility: visible; 79 transition-delay: .5s; 80} 81 82.card .content .detail { 83 display: flex; 84 flex-direction: column; 85 width: 100%; 86 height: 100%; 87 opacity: 0; 88 transition: all .3s ease-in-out; 89 transition-delay: 0s; 90} 91 92.card:hover .content .detail { 93 color: #181818; 94 opacity: 100%; 95 transition: 1s; 96 transition-delay: .3s; 97} 98 99.card .content .detail span { 100 margin-bottom: 5px; 101 font-size: 18px; 102 font-weight: 800; 103} 104 105.card .content .detail button { 106 background: #b8854b; 107 margin-top: auto; 108 width: 75px; 109 height: 25px; 110 color: #ffffff; 111 font-size: 13px; 112 border: none; 113 border-radius: 8px; 114 transition: .3s ease-in-out; 115} 116 117.card .content .detail button:hover { 118 background: #d39f63; 119} 120 121.card .content .product-image { 122 position: relative; 123 width: 100%; 124 height: 100%; 125} 126 127.card .content .product-image .box-image { 128 display: flex; 129 position: absolute; 130 top: 0; 131 left: -25%; 132 width: 100%; 133 height: 115%; 134 opacity: 0; 135 transform: scale(.5); 136 transition: all .5s ease-in-out; 137 transition-delay: 0s; 138} 139 140.card:hover .content .product-image .box-image { 141 top: -25%; 142 left: 0; 143 opacity: 100%; 144 transform: scale(1); 145 transition-delay: .3s; 146} 147 148.card .content .product-image .box-image .img-product { 149 margin: auto; 150 width: 7rem; 151 height: auto; 152} 153 154.fil-shoes1, .fil-shoes2 { 155 fill: #333333 156}
4K views
4K views
MIT License