β˜…CSS Codes for Janitor.ai β˜…

bot card animations

<style> /* πŸ’› Bio preview (hidden until hover) πŸ’› */ .css-96l1id { position: absolute; top: 120px; left: 0; width: 100%; height: 89px; color: white; text-align: center; padding: 10px; opacity: 0; transform: translateY(30px); transition: transform 0.4s ease, opacity 0.4s ease; display: flex; align-items: center; justify-content: center; }

/* πŸ’› Tags container πŸ’› */ .css-4ofde4 { position: absolute; top: 240px; left: 0; width: 100%; height: 89px; text-align: center; padding: 10px; opacity: 0; transform: translateY(10px); transition: transform 0.4s ease, opacity 0.4s ease; display: flex; align-items: center; justify-content: center; }

/* πŸ’› Show bio & tags on hover πŸ’› */ .css-1sxhvxh:hover .css-96l1id, .css-1sxhvxh:hover .css-4ofde4 { opacity: 1; transform: translateY(0);
}

}
/* πŸ’› Bot card size πŸ’› */ .css-1s5evre { height: 450px; position: relative; overflow: hidden; }

/* πŸ’› Bot image πŸ’› */ .css-1q7rmf0 { height: 450px; object-fit: cover; transition: filter 0.3s ease; }

/* πŸ’› On hover, image dims πŸ’› */ .css-1sxhvxh:hover .css-1q7rmf0 { filter: brightness(30%); }

/* πŸ’› Put bot name at bottom πŸ’› */ .css-1s5evre > a { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; }

/* πŸ’› Bot name style πŸ’› */ .css-zgqw37 { font-size: 20px; position: absolute; left: 0; top: 400px; text-align: center; width: 100%; z-index: 7; }

/* πŸ’› Bio preview (hidden until hover) πŸ’› */ .css-96l1id { position: absolute; top: 120px; left: 0; width: 100%; height: 89px; color: white; text-align: center; padding: 10px; opacity: 0; backface-visibility: hidden; transition: transform 0.6s, opacity 0.3s; display: flex; align-items: center; justify-content: center; }

/* πŸ’› Tags container πŸ’› */ .css-4ofde4 { position: absolute; top: 240px; left: 0; width: 100%; height: 89px; text-align: center; padding: 10px; opacity: 0; transition: transform 0.6s, opacity 0.3s; display: flex; align-items: center; justify-content: center; }

/* πŸ’› Show bio & tags on hover πŸ’› */ .css-1sxhvxh:hover .css-96l1id, .css-1sxhvxh:hover .css-4ofde4 { opacity: 1; transform: rotateY(0deg); }

/* πŸ’› Limitless tag πŸ’› */ .css-1ylu7un { border: none; border-radius: 0px; font-size: 0.8rem; padding: 3px 12px; margin: 6px 0; width: fit-content; white-space: nowrap; Width: 150px; }

/* πŸ’› Tags container layout πŸ’› */ .css-k1urot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; z-index: 1; }

/* πŸ’› Regular tags πŸ’› */ .css-x2gqu0, [href*="custom_tags"] span { border-radius: 0; padding: 2px 8px; font-size: 0.7rem; white-space: nowrap; }

/* πŸ’› Clean up card background πŸ’› */ .css-2n7zf2 > div > div:not(:first-child):not(:last-child) > div, .css-2n7zf2 > div > div:not(:first-child):not(:last-child) > div > div:nth-child(-n+5):not(.css-1s5evre) { background: transparent !important; }

/* πŸ’› Hide divider and username πŸ’› */ .css-1lgnt2x, .css-1m151rf, .css-fo6ddv:nth-child(2) { display: none !important; } /* πŸ’› Optional: star icon hidden πŸ’› */ .css-1h8fads { display: none; } /* πŸ’› makes the username go dark when hoveringπŸ’› */ .css-1sxhvxh:hover .css-zgqw37 { filter: brightness(30%); } </style>

Edit
Pub: 05 Feb 2025 06:51 UTC
Edit: 09 Apr 2025 04:02 UTC
Views: 787