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

10
snippets/image-overlay-hover.md
View File

@ -5,6 +5,10 @@ tags: visual,animation,advanced
Displays an image overlay effect on hover.
- Use the `:before` and `:after` elements for the top and bottom bars of the overlay respectively, setting their `opacity`, `transform` and `transition` to produce the desired effect.
- Use the `figcaption` for the text of the overlay, setting `display: flex`, `flex-direction: column` and `justify-content: center` to center the text into the image.
- Use the `:hover` pseudo-selector to update the `opacity` and `transform` of all the elements and produce the desired effect.
```html
<figure class="hover-img">
<img src="https://i.picsum.photos/id/200/440/320.jpg"/>
@ -92,9 +96,3 @@ Displays an image overlay effect on hover.
opacity: 1;
}
```
#### Explanation
- Use the `:before` and `:after` elements for the top and bottom bars of the overlay respectively, setting their `opacity`, `transform` and `transition` to produce the desired effect.
- Use the `figcaption` for the text of the overlay, setting `display: flex`, `flex-direction: column` and `justify-content: center` to center the text into the image.
- Use the `:hover` pseudo-selector to update the `opacity` and `transform` of all the elements and produce the desired effect.