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

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,11 @@ 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.
```html
<figure class="hover-menu">
<img src="https://i.picsum.photos/id/1060/800/480.jpg"/>
@ -82,10 +87,3 @@ Displays a menu overlay when the image is hovered.
opacity: 1;
}
```
#### Explanation
- 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.