Commit d45221bf987a2602a97fc40c5841e6c9ae8aefc0
1 parent
64e8677f
Exists in
master
and in
10 other branches
adding custom hover css
Showing
1 changed file
with
47 additions
and
0 deletions
Show diff stats
| @@ -0,0 +1,47 @@ | @@ -0,0 +1,47 @@ | ||
| 1 | +/* Float Shadow */ | ||
| 2 | +.hvr-float-shadow { | ||
| 3 | + display: inline-block; | ||
| 4 | + vertical-align: middle; | ||
| 5 | + -webkit-transform: translateZ(0); | ||
| 6 | + transform: translateZ(0); | ||
| 7 | + box-shadow: 0 0 1px rgba(0, 0, 0, 0); | ||
| 8 | + -webkit-backface-visibility: hidden; | ||
| 9 | + backface-visibility: hidden; | ||
| 10 | + -moz-osx-font-smoothing: grayscale; | ||
| 11 | + position: relative; | ||
| 12 | + -webkit-transition-duration: 0.3s; | ||
| 13 | + transition-duration: 0.3s; | ||
| 14 | + -webkit-transition-property: transform; | ||
| 15 | + transition-property: transform; | ||
| 16 | + overflow: visible; | ||
| 17 | +} | ||
| 18 | +.hvr-float-shadow:before { | ||
| 19 | + pointer-events: none; | ||
| 20 | + position: absolute; | ||
| 21 | + z-index: -1; | ||
| 22 | + content: ''; | ||
| 23 | + top: 100%; | ||
| 24 | + left: 5%; | ||
| 25 | + height: 10px; | ||
| 26 | + width: 90%; | ||
| 27 | + opacity: 0; | ||
| 28 | + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); | ||
| 29 | + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); | ||
| 30 | + /* W3C */ | ||
| 31 | + -webkit-transition-duration: 0.3s; | ||
| 32 | + transition-duration: 0.3s; | ||
| 33 | + -webkit-transition-property: transform, opacity; | ||
| 34 | + transition-property: transform, opacity; | ||
| 35 | +} | ||
| 36 | +.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { | ||
| 37 | + -webkit-transform: translateY(-5px); | ||
| 38 | + transform: translateY(-5px); | ||
| 39 | + /* move the element up by 5px */ | ||
| 40 | +} | ||
| 41 | +.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { | ||
| 42 | + opacity: 1; | ||
| 43 | + -webkit-transform: translateY(5px); | ||
| 44 | + transform: translateY(5px); | ||
| 45 | + /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ | ||
| 46 | +} | ||
| 47 | + |