refactor: Hover effect improved [TextAndImage].

src/QUI/Bricks/Controls/TextAndImage.css

@@ -17,25 +17,11 @@
     position: relative;
 }
 
-.quiqqer-textImage-image picture {
+.quiqqer-textImage-image__imageZoom picture {
     position: relative;
 }
 
-.quiqqer-textImage-image picture:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.1);
-    opacity: 0;
-    pointer-events: none;
-    transition: 0.3s opacity ease;
-    z-index: 1;
-}
-
-.quiqqer-textImage-image picture:after {
+.quiqqer-textImage-image__imageZoom picture:after {
     content: "\f002";
     font-family: "FontAwesome";
     position: absolute;
@@ -43,31 +29,26 @@
     top: 50%;
     transform: translate(-50%, -35%);
     font-size: 5rem;
+    color: #fff;
     pointer-events: none;
     opacity: 0;
     transition: 0.3s transform ease, 0.3s opacity ease;
     z-index: 1;
 }
 
-.quiqqer-textImage-image picture:hover:before {
-    /*opacity: 1;*/
-}
-
-.quiqqer-textImage-image picture:hover:after {
+.quiqqer-textImage-image__imageZoom picture:hover:after {
     transform: translate(-50%, -50%);
     opacity: 1;
 }
 
-.quiqqer-textImage-image img {
+.quiqqer-textImage-image__imageZoom img {
     display: block;
     cursor: zoom-in !important;
     transition: 0.3s filter ease, 0.3s clip-path ease;
-    clip-path: circle(100% at 50% 50%);
 }
 
-.quiqqer-textImage-image picture:hover img {
-    filter: blur(3px);
-    clip-path: circle(35% at 50% 50%);
+.quiqqer-textImage-image__imageZoom picture:hover img {
+    filter: brightness(0.5);
 }
 
 .quiqqer-textImage-content {

src/QUI/Bricks/Controls/TextAndImage.html

 {assign var=imageOnLeftClass value='quiqqer-textImage__imageOnRight'}
 {if $imageOnLeft}
-{assign var=imageOnLeftClass value='quiqqer-textImage__imageOnLeft'}
+    {assign var=imageOnLeftClass value='quiqqer-textImage__imageOnLeft'}
 {/if}
 
+{assign var=imageZoomClass value=''}
+{if $imageZoom}
+    {assign var=imageZoomClass value='quiqqer-textImage-image__imageZoom'}
+{/if}
+
+
+
 <div class="quiqqer-textImage {$imageOnLeftClass}">
     {if $imageOnLeft}
-    <div class="quiqqer-textImage-box quiqqer-textImage-image {$fullImageHeight} {$imgWidthClass} mobile-grid-100">
+    <div class="quiqqer-textImage-box quiqqer-textImage-image {$fullImageHeight} {$imgWidthClass} {$imageZoomClass} mobile-grid-100">
         {if $img}
             {assign var=inlineStyle value=''}
             {if $maxImageWidth}
@@ -40,7 +47,7 @@
             {$this->getAttribute('content')}
         </div>
     </div>
-    <div class="quiqqer-textImage-box quiqqer-textImage-image {$fullImageHeight} {$imgWidthClass} mobile-grid-100">
+    <div class="quiqqer-textImage-box quiqqer-textImage-image {$fullImageHeight} {$imgWidthClass} {$imageZoomClass} mobile-grid-100">
         {if $img}
             {assign var=inlineStyle value=''}
             {if $maxImageWidth}