Category Tile

Close up of classic red and white ball toy for card games on a dark background

Pokemon

primary #266038 dark

Pokemon

secondary #217E52 dark

Pokemon

tertiary #1A1E1A dark

Pokemon

dark #0A0A0A dark

Pokemon

light #FFFFFF light

Pokemon

accent #217E52 dark

<div class="category-tile">
				<img src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaLxMQMN70cKZ159oAm_6AnEHxipBwVD2Mr7z6c_hvVWj7GQ5OHdFo-H3u6ggHI6ljh7FoST87Ri6l5ei4NKG-D8KhWZS-W5l8RCIvn1Li0tfehLgW21-L_myjhQrmuuVIrjA1nWasw8RhKhRO8Z2eJ2esNyy0W9owEYaMxTxRQXGifnWQRsyAwbV_ei8BK8w5Ow_YifRTMaIdV3F0d4uLg25HA0TEe8UbNo9SvFplxyUqifWrXmTsdXYxy6-bphML9tYMmwsw" alt="Close up of classic red and white ball toy for card games on a dark background">
				<div class="category-tile__overlay"></div>
				<h3 class="category-tile__label">Pokemon</h3>
			</div>

.category-tile {
aspect-ratio: 4 / 3;
			position: relative;
			border-radius: var(--radius-xl);
			overflow: hidden;
			cursor: pointer;
}

.category-tile img {
width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.7s ease;
}

.category-tile:hover img {
transform: scale(1.1);
}

.category-tile__overlay {
position: absolute;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.4);
			transition: background-color 0.3s ease;
}

.category-tile:hover .category-tile__overlay {
background-color: rgba(0, 0, 0, 0.2);
}

.category-tile__label {
position: absolute;
			bottom: var(--space-6);
			left: var(--space-6);
			font-size: var(--fs-h3);
			font-weight: var(--fw-bold);
}

Pokemon

Pokemon

Pokemon

Pokemon

Pokemon

Pokemon

Origin

Tokens Used