-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4629139
commit c928b0a
Showing
1 changed file
with
11 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,11 @@ | ||
ChromaGrid | ||
## 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). <br> | ||
|
||
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> | ||
|
||
The card also has an ::after pseudo-element that creates a semi-transparent background, giving the card a subtle shadow effect. | ||
<br> | ||
|
||
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. |