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

Update snippet wording

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2021-10-11 18:38:06 +03:00
committed by Chalarangelo
parent b137bd7d75
commit ee00c20cc3
12 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,14 @@
title: Image overlay on hover
tags: visual,animation,advanced
firstSeen: 2020-04-20T14:12:33+03:00
lastUpdated: 2020-12-30T15:37:37+02:00
lastUpdated: 2021-10-11T18:44:51+03:00
---
Displays an image overlay effect on hover.
- Use the `:before` and `:after` pseudo-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.
- Use the `:before` and `:after` pseudo-elements for the top and bottom bars of the overlay respectively. Set their `opacity`, `transform` and `transition` to produce the desired effect.
- Use the `<figcaption>` for the text of the overlay. Set `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 display the overlay.
```html
<figure class="hover-img">