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

Update hover-shadow-box-animation.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-01-12 12:00:08 +02:00
committed by GitHub
parent 6d8b360d2a
commit 78b83e9297
1 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
snippets/hover-shadow-box-animation.md
View File

@ -1,6 +1,5 @@
### Hover Shadow Box Animation ### Hover Shadow Box Animation
Creates a shadow box around the text whern it is hovered. Creates a shadow box around the text whern it is hovered.
#### HTML #### HTML
@ -50,16 +49,15 @@ Creates a shadow box around the text whern it is hovered.
} }
</style> </style>
#### Explanation #### Explanation
1. `display: inline-block` for giving width and length for `p` element thus making it as an `inline-block`. 1. `display: inline-block` to set width and length for `p` element thus making it an `inline-block`.
2. setting the `transform: perspective(1px)` for giving element a 3-D space by affecting the distance between the Z plane and the user and `translate(0)` for repositioning `p` element along z-axis in 3-D Space. 2. Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space.
3. `box-shadow:` for setting up the box. 3. `box-shadow:` to set up the box.
4. `transparent` to make box transparent 4. `transparent` to make box transparent.
5.`transition-property` for enabling both box-shadow and transform 5. `transition-property` to enable transitions for both `box-shadow` and `transform`.
6. `:hover` to activate whole css when hovering is done till `active`. 6. `:hover` to activate whole css when hovering is done until `active`.
7. `transform: scale(1.2)` for changing the scale to 1.2. Now text looks for 1.2 times magnified with shadow Box Effect 7. `transform: scale(1.2)` to change the scale, magnifying the text.
#### Browser Support #### Browser Support