From 29cdf2e74de4e11c1e874f89814c8a3185d30181 Mon Sep 17 00:00:00 2001
From: adabrz777 <adabrz777@gmail.com>
Date: Wed, 27 Nov 2019 23:02:18 +0100
Subject: [PATCH] Add Reflects Hover Effects

---
 css/hover.css | 107 +++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    |  13 ++++++
 2 files changed, 119 insertions(+), 1 deletion(-)

diff --git a/css/hover.css b/css/hover.css
index f5fcf87..8f63213 100644
--- a/css/hover.css
+++ b/css/hover.css
@@ -4144,9 +4144,114 @@
   -webkit-transition-property: width, height;
   transition-property: width, height;
 }
-.hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before {
+.hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before{
   width: 25px;
   height: 25px;
 }
 
+/* REFLECTS */
+/* Reflects Elements */
+.hvr-reflect-top, .hvr-reflect-bottom, .hvr-reflect-left, .hvr-reflect-right, .hvr-reflect-top-left, .hvr-reflect-top-right, .hvr-reflect-bottom-left, .hvr-reflect-bottom-right{
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  position: relative;
+  overflow: hidden;
+}
+/* Reflects Pseudo Elements */
+.hvr-reflect-top::before, .hvr-reflect-bottom::before, .hvr-reflect-left::before, .hvr-reflect-right::before, .hvr-reflect-top-left::before, .hvr-reflect-top-right::before, .hvr-reflect-bottom-left::before, .hvr-reflect-bottom-right::before{
+  content: '';
+  background: #fff;
+  height: 30%;
+  width: 150%;
+  position: absolute;
+  -webkit-box-shadow: 0px 0px 15px 5px rgba(255,255,255,1);
+  -moz-box-shadow: 0px 0px 15px 5px rgba(255,255,255,1);
+  box-shadow: 0px 0px 15px 5px rgba(255,255,255,1);
+}
+/* Reflect Top */
+.hvr-reflect-top::before{
+  top: calc(-150% + -15px);
+  transition: 0s;
+  transform: translate(-10%, 0%);
+}
+.hvr-reflect-top:hover::before{
+  top: calc(150% + 15px);
+  transition: .36s linear;
+}
+/* Reflect Bottom */
+.hvr-reflect-bottom::before{
+  top: calc(150% + 15px);
+  transition: 0s;
+  transform: translate(-10%, 0%);
+}
+.hvr-reflect-bottom:hover::before{
+  top: calc(-150% + -15px);
+  transition: .36s linear;
+}
+/* Reflect Left */
+.hvr-reflect-left::before{
+  left: calc(-150% + -15px);
+  transform: rotateZ(90deg);
+  transition: 0s;
+}
+.hvr-reflect-left:hover::before{
+  left: calc(150% + 15px);
+  transition: .36s linear;
+}
+/* Reflect Right */
+.hvr-reflect-right::before{
+  left: calc(150% + 15px);
+  transform: rotateZ(90deg);
+  transition: 0s;
+}
+.hvr-reflect-right:hover::before{
+  left: calc(-150% + -15px);
+  transition: .36s linear;
+}
+/* Reflect Top Left */
+.hvr-reflect-top-left::before{
+  left: calc(-150% + -15px);
+  transform: rotateZ(-45deg);
+  transition: 0s;
+}
+.hvr-reflect-top-left:hover::before{
+  left: calc(150% + 15px);
+  transition: .36s linear;
+}
+/* Reflect Top Right */
+.hvr-reflect-top-right::before{
+  left: calc(150% + 15px);
+  transform: rotateZ(45deg);
+  transition: 0s;
+}
+.hvr-reflect-top-right:hover::before{
+  left: calc(-150% + -15px);
+  transition: .36s linear;
+}
+/* Reflect Bottom Left */
+.hvr-reflect-bottom-left::before{
+  left: calc(-150% + -15px);
+  transform: rotateZ(45deg);
+  transition: 0s;
+}
+.hvr-reflect-bottom-left:hover::before{
+  left: calc(150% + 15px);
+  transition: .36s linear;
+}
+/* Reflect Bottom Right */
+.hvr-reflect-bottom-right::before{
+  left: calc(150% + 15px);
+  transform: rotateZ(-45deg);
+  transition: 0s;
+}
+.hvr-reflect-bottom-right:hover::before{
+  left: calc(-150% + -15px);
+  transition: .36s linear;
+}
+
+
+
 /*# sourceMappingURL=hover.css.map */
diff --git a/index.html b/index.html
index 2c377b7..1af7e43 100644
--- a/index.html
+++ b/index.html
@@ -246,6 +246,19 @@ <h2>Curls</h2>
 				<a href="#" class="hvr-curl-top-right">Curl Top Right</a>
 				<a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a>
 				<a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a>
+
+				
+				<h2>Reflects</h2>
+
+				<a href="#" class="hvr-reflect-top">Reflect Top</a>
+				<a href="#" class="hvr-reflect-bottom">Reflect Bottom</a>
+				<a href="#" class="hvr-reflect-left">Reflect Left</a>
+				<a href="#" class="hvr-reflect-right">Reflect Right</a>
+				<a href="#" class="hvr-reflect-top-left">Reflect Top Left</a>
+				<a href="#" class="hvr-reflect-top-right">Reflect Top Right</a>
+				<a href="#" class="hvr-reflect-bottom-left">Reflect Bottom Left</a>
+				<a href="#" class="hvr-reflect-bottom-right">Reflect Bottom Right</a>
+				
 			</div>