andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
snippets/navigation-list-item-hover-and-focus-effect.md
View File

@ -3,11 +3,11 @@ title: Navigation list item hover and focus effect
tags: visual,beginner
---
Fancy hover and focus effect at navigation items using transform CSS property.
Creates a custom hover and focus effect for navigation items, using CSS transformations.
- Use the `:before` pseudo-element at the list item anchor to create a hover effect, hide it using `transform: scale(0)`.
- Use the `:hover` and `:focus` pseudo-selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
- Prevent the pseudo-element from covering the anchor element by using `z-index: -1`.
- Use the `:hover` and `:focus` pseudo-class selectors to transition to `transform: scale(1)` and show the pseudo-element with its colored background.
- Prevent the pseudo-element from covering the anchor element by using `z-index`.
```html
<nav class="hover-nav">
@ -38,6 +38,7 @@ Fancy hover and focus effect at navigation items using transform CSS property.
text-align: center;
padding: 8px 12px;
text-decoration: none;
z-index: 0;
}
li a:before {