Bellcom: Added proper hero element hover effects

Author: Simon L. Lange

web/themes/custom/subsites/bellcom_theme/assets/css/bundle.css

@@ -1513,7 +1513,33 @@ footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .instag
         position: relative;
         box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
         transition: 0.3s ease;
+        overflow: hidden;
+        transform-origin: center top;
+        transform-style: preserve-3d;
+        transform: translateZ(0);
       }
+.hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element:after {
+          position: absolute;
+          content: '';
+          z-index: 10;
+          width: 200%;
+          height: 100%;
+          top: -90%;
+          left: -20px;
+          opacity: .1;
+          transform: rotate(45deg);
+          background: #fff;
+          filter: blur(30px);
+          transition: .3s ease;
+        }
+.hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element:hover {
+          transform: scale(1.02);
+        }
+.hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element:hover:after {
+            transform: rotate(25deg);
+            top: -40%;
+            opacity: .15;
+          }
 @media (max-width: 1200px) {
 .hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element {
           display: block;
@@ -1533,9 +1559,6 @@ footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .instag
           width: 95%
       }
         }
-.hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element:hover {
-          transform: scale(1.01);
-        }
 .hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element img {
           position: absolute;
           top: 0;

web/themes/custom/subsites/bellcom_theme/src/scss/sections/hero.scss

@@ -178,6 +178,34 @@
         position: relative;
         box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
         transition: 0.3s ease;
+        overflow: hidden;
+        transform-origin: center top;
+        transform-style: preserve-3d;
+        transform: translateZ(0);
+
+        &:after {
+          position: absolute;
+          content: '';
+          z-index: 10;
+          width: 200%;
+          height: 100%;
+          top: -90%;
+          left: -20px;
+          opacity: .1;
+          transform: rotate(45deg);
+          background: #fff;
+          filter: blur(30px);
+          transition: .3s ease;
+        }
+
+        &:hover {
+          transform: scale(1.02);
+          &:after {
+            transform: rotate(25deg);
+            top: -40%;
+            opacity: .15;
+          }
+        }
 
         @media (max-width: 1200px) {
           display: block;
@@ -195,9 +223,6 @@
           width: 95%;
         }
 
-        &:hover {
-          transform: scale(1.01);
-        }
 
         img {
           position: absolute;