diff --git a/css/hover.custom.css b/css/hover.custom.css new file mode 100644 index 0000000..519133f --- /dev/null +++ b/css/hover.custom.css @@ -0,0 +1,47 @@ +/* Float Shadow */ +.hvr-float-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -moz-osx-font-smoothing: grayscale; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + overflow: visible; +} +.hvr-float-shadow:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + /* W3C */ + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform, opacity; + transition-property: transform, opacity; +} +.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + /* move the element up by 5px */ +} +.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { + opacity: 1; + -webkit-transform: translateY(5px); + transform: translateY(5px); + /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ +} + -- libgit2 0.21.2