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

8
snippets/image-hover-menu.md
View File

@ -5,10 +5,10 @@ tags: layout,animation,intermediate
Displays a menu overlay when the image is hovered.
- Use a `figure` to wrap the `img` element and a `div` element that will contain the menu links.
- Use the `opacity` and `right` attributes to animate the image on hover, to create a sliding effect.
- Set the `left` attribute of the `div` to the negative of the element's `width` and reset it to `0` when hovering over the parent element to slide in the menu.
- Use `display: flex`, `flex-direction: column` and `justify-content: center` on the `div` to vertically center the menu items.
- Use a `<figure>` to wrap the `<img>` element and a `<div>` element that will contain the menu links.
- Use the `opacity` and `right` attributes to animate the image on hover, creating a sliding effect.
- Set the `left` attribute of the `<div>` to the negative of the element's `width` and reset it to `0` when hovering over the parent element to slide in the menu.
- Use `display: flex`, `flex-direction: column` and `justify-content: center` on the `<div>` to vertically center the menu items.
```html
<figure class="hover-menu">