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:
Shobhit Sachan
2018-03-07 03:20:16 +05:30
committed by GitHub
parent b14c20028c
commit be24150bd4
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ Creates a shadow box around the text whern it is hovered.
#### HTML #### HTML
```html ```html
< h4 class = "hover-shadow-box-animation"> Box it! </h4> <h4 class = "hover-shadow-box-animation"> Box it! </h4>
``` ```
#### CSS #### CSS
@ -18,6 +18,7 @@ Creates a shadow box around the text whern it is hovered.
-webkit-transform:perspective(1px) translateZ(0); -webkit-transform:perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent; box-shadow: 0 0 1px transparent;
margin: 10px;
-webkit-transition-duration : 0.3s; -webkit-transition-duration : 0.3s;
transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform; -webkit-transition-property: box-shadow, transform;
@ -32,7 +33,7 @@ Creates a shadow box around the text whern it is hovered.
#### Demo #### Demo
<div class = "snippet-demo"> <div class = "snippet-demo">
< h4 class = "snippet-demo_hover-shadow-box-animation"> Box it! <h4 class = "snippet-demo_hover-shadow-box-animation"> Box it!
</h4> </h4>
</div> </div>
@ -40,6 +41,7 @@ Creates a shadow box around the text whern it is hovered.
.snippet-demo_hover-shadow-box-animation{ .snippet-demo_hover-shadow-box-animation{
display: inline-block; display: inline-block;
color: #0087ca; color: #0087ca;
margin: 10px;
vertical-align: middle; vertical-align: middle;
-webkit-transform:perspective(1px) translateZ(45); -webkit-transform:perspective(1px) translateZ(45);
transform: perspective(1px) translateZ(45); transform: perspective(1px) translateZ(45);