Hi,
i tried adding hover card to my home page but for some reason it only shows when im editing the code, when i reload the page it doesnt show, it shows a black area where the hover card should be shown, i tried the same with different codes, the same thing happened, im not sure if the problem is with the code or something in the theme files
thanks in advance
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; font-family: 'Poppins', sans-serif; } body { display: fixed; justify-content: center; align-items: center; min-height: 100vh; background: #131313; } .container { position: relative; } .container .card { margin-left: 20px; margin-bottom: 20px; position: relative; width: 190px; height: 530px; background: #232323; border-radius: 20px; overflow: hidden; transition: 0.5s ease-in-out; } .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffcc00; clip-path: circle(180px at 80% 20%); transition: 0.7s ease-in-out; z-index: 200 } .container .card:hover::before { clip-path: circle(280px at 80% -20%) } .container .card::after { content: url(../img/olympikus-logo.png); opacity: 0.1; position: absolute; top: 50%; left: -42%; } .container .card .imgBox { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s ease-in-out; } .container .card:hover .imgBox { top: 10%; transform: translate(0%); transition: 0.5s; } .container .card .imgBox img { position: absolute; top: 44%; left: -48%; transform: rotateY(180deg) translate(-50%, -50%) rotate(25deg); width: 290px; } .container .card .contentBox { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10 } .container .card:hover .contentBox { height: 350px } .container .card h2 { position: relative; font-weight: 600; font-size: 4rem; line-height: 2.3rem; letter-spacing: 1px; color: #fff; } .container .card .size, .container .card .color { display: flex; justify-content: center; transition: 0.5s; opacity: 0; visibility: hidden; margin: 20px 10; } .container .card:hover .size, .container .card:hover .color { opacity: 1; visibility: visible; } .container .card:hover .size { transition-delay: 0.5s; } .container .card:hover .color { transition-delay: 0.7s; } .container .card h3 { color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 5px; } .container .card h4 { color: #fff; font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-right: 5px; } .size span { width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 3px; border-radius: 4px; cursor: pointer; transition: 0.5s; } .size span:hover { background: #287cdc; color: #fff; } .color span { width: 20px; height: 20px; background: #287cdc; border-radius: 50%; margin: 0 5px; cursor: pointer; } .color span:hover { background: #0f5aaf; } .color span:nth-child(3) { background: #ff0; } .color span:nth-child(3):hover { background: #c9bb02; } .color span:nth-child(4) { background: #e91e63; } .color span:nth-child(4):hover { background: #ad1749; } .card .contentBox a { margin-left: 10px; display: inline-block; padding: 10px 20px; background: #fff; border-radius: 4px; font-weight: 600; color: #111; opacity: 0; transform: translateY(50px); transition: 0.3s; } .card:hover .contentBox a { opacity: 1; transform: translate(0px); /* transition-delay: 0.2s; */ } .card .contentBox a:hover { margin-left: 10px; background: #0f5aaf; color: #fff; } Product Card Hover Animation
