Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rudeevelops/daily_css_hovers
https://github.com/rudeevelops/daily_css_hovers
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/rudeevelops/daily_css_hovers
- Owner: RuDeeVelops
- Created: 2024-02-14T19:06:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-15T09:25:08.000Z (about 1 year ago)
- Last Synced: 2024-11-10T21:15:36.766Z (3 months ago)
- Language: CSS
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Daily Design 08 - CSS hover and transitions
[](https://www.youtube.com/digitalclay)
[](https://twitter.com/3DRudy)
[](https://github.com/RuDeeVelops/creativedev-log/commits/main)### Tech stack: `css` `html`
### Live link: https://codepen.io/3DRudy/pen/RwdEQEZ
![]()
### Main idea
- An elegant `:hover` effect is created by playing with a few animations layered on top of each other.
- Backgrounds are designed by layering `background-color`, a `radial-gradient` and a SVG pattern within `background-image`.
- We transition into a sutbly different `background-color` and `background-image`.
- A `blur-effect`, `outline-effect` and `glow-effect` are stacked to obtain smooth motion.
- `blur-effect` plays once
- `outline-effect` plays once and doesn't revert (`forwards`)
- `glow-effect` loops infinitely
- All the action happens here:```css
.left-container:hover,
.mini-container:hover {
cursor: pointer;
background-color: #2c2c2e;
background-image: radial-gradient(circle, #eef2f3, #33393d),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 100 100'%3E%3Cg fill='%33393d' fill-opacity='0.5'%3E%3Cpath d='M0 0h50v50H0zm50 50h50v50H50zM50 0h50v50H50zm0 50h50v50H50z'/%3E%3C/g%3E%3C/svg%3E");
background-blend-mode: overlay;
transition: background-color 0.3s ease-in-out, background-image 0.3s
ease-in-out;
animation: blur-effect 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), outline-effect
0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards,
glow-effect 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
```