Skip to content

Commit c928b0a

Browse files
authored
Update README.md
1 parent 4629139 commit c928b0a

File tree

1 file changed

+11
-1
lines changed

1 file changed

+11
-1
lines changed

README.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
ChromaGrid
1+
## ChromaGrid
2+
3+
### Overview of the Project:
4+
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). <br>
5+
6+
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. <br>
7+
8+
The card also has an ::after pseudo-element that creates a semi-transparent background, giving the card a subtle shadow effect.
9+
<br>
10+
11+
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.

0 commit comments

Comments
 (0)