ChromaGrid

Overview of the Project:

ChromaGrid is a simple grid layout that displays a series of cards with a hover effect. The layout is created using CSS Grid and has a 4x4 grid with each card having a width and height of 150px. The cards are positioned relatively and have a background color of rgba(45, 45, 45, 1).

ChromaGrid/style.css

Lines 16 to 28 in c928b0a

	.container{
	display: grid;
	grid-template-columns: repeat(4,150px);
	grid-gap: 10px;
	margin-top: 35px;
	}
	.container .card{
	position: relative;
	width: 150px;
	height: 150px;
	background: rgba(45, 45, 45, 1);
	overflow: hidden;

When the user hovers over a card, a radial gradient appears in the center of the card, creating a subtle animation effect. The gradient is created using the ::before pseudo-element and is positioned using the --x and --y custom properties. The gradient's opacity is set to 0 by default and transitions to 1 when the user hovers over the card.

ChromaGrid/style.css

Lines 32 to 39 in 87a00c4

	.container .card::before{
	content: '';
	position: absolute;
	top: var(--y);
	left: var(--x);
	transform: translate(-50%,-50%);
	background: radial-gradient(var(--clr), transparent, transparent);
	opacity: 0;

The card also has an ::after pseudo-element that creates a semi-transparent background, giving the card a subtle shadow effect.

ChromaGrid/style.css

Lines 49 to 54 in 9d95764

	.container .card::after{
	content: '';
	position: absolute;
	inset: 2px;
	background: rgba(45, 45, 45, 0.9);
	}

Overall, this project is a great example of how to use CSS Grid and custom properties to create a dynamic and interactive layout. The hover effect adds a nice touch to the design and can be easily customized to fit different design needs.