{"id":19491081,"url":"https://github.com/rudeevelops/daily_css_hovers","last_synced_at":"2025-10-29T22:44:24.809Z","repository":{"id":222544897,"uuid":"757572424","full_name":"RuDeeVelops/daily_CSS_hovers","owner":"RuDeeVelops","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-15T09:25:08.000Z","size":1403,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T11:52:17.023Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RuDeeVelops.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-14T19:06:28.000Z","updated_at":"2024-02-14T20:13:50.000Z","dependencies_parsed_at":"2025-01-08T08:44:05.217Z","dependency_job_id":"2dc61b1b-cac8-4ad4-ad1e-55477c71a0b0","html_url":"https://github.com/RuDeeVelops/daily_CSS_hovers","commit_stats":null,"previous_names":["rudeevelops/dailydesign_08_nylon"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RuDeeVelops/daily_CSS_hovers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fdaily_CSS_hovers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fdaily_CSS_hovers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fdaily_CSS_hovers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fdaily_CSS_hovers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RuDeeVelops","download_url":"https://codeload.github.com/RuDeeVelops/daily_CSS_hovers/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fdaily_CSS_hovers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281713571,"owners_count":26548732,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T21:15:41.645Z","updated_at":"2025-10-29T22:44:24.735Z","avatar_url":"https://github.com/RuDeeVelops.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Daily Design 08 - CSS hover and transitions\n\n[![Follow on YouTube](https://img.shields.io/badge/-Follow%20on%20YouTube-red?logo=YouTube\u0026logoColor=white\u0026style=flat)](https://www.youtube.com/digitalclay)\n[![Twitter Follow](https://img.shields.io/twitter/follow/3DRudy.svg?style=social)](https://twitter.com/3DRudy)\n[![GitHub commits](https://img.shields.io/github/commit-activity/m/RuDeeVelops/creativedev-log.svg)](https://github.com/RuDeeVelops/creativedev-log/commits/main)\n\n### Tech stack: `css` `html`\n\n### Live link: https://codepen.io/3DRudy/pen/RwdEQEZ\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./nylon_rodolfoFanti.gif\" alt=\"Alt text\" style=\"max-width: 400px;\"\u003e\n\u003c/p\u003e\n\n### Main idea\n\n- An elegant `:hover` effect is created by playing with a few animations layered on top of each other.\n- Backgrounds are designed by layering `background-color`, a `radial-gradient` and a SVG pattern within `background-image`.\n- We transition into a sutbly different `background-color` and `background-image`.\n- A `blur-effect`, `outline-effect` and `glow-effect` are stacked to obtain smooth motion.\n  - `blur-effect` plays once\n  - `outline-effect` plays once and doesn't revert (`forwards`)\n  - `glow-effect` loops infinitely\n- All the action happens here:\n\n\u003cdiv style=\"max-width: 70vw; margin-left: auto; margin-right: auto;\"\u003e\n\n```css\n.left-container:hover,\n.mini-container:hover {\n  cursor: pointer;\n  background-color: #2c2c2e;\n  background-image: radial-gradient(circle, #eef2f3, #33393d),\n    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\");\n  background-blend-mode: overlay;\n  transition: background-color 0.3s ease-in-out, background-image 0.3s\n      ease-in-out;\n  animation: blur-effect 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), outline-effect\n      0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards,\n    glow-effect 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;\n}\n```\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudeevelops%2Fdaily_css_hovers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frudeevelops%2Fdaily_css_hovers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudeevelops%2Fdaily_css_hovers/lists"}