From 101ba232045a34926273105e61be0271e528de8e Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Wed, 2 Mar 2022 12:09:24 +0100
Subject: [PATCH] refactor: Hover effect improved [TextAndImage].
---
src/QUI/Bricks/Controls/TextAndImage.css | 33 +++++------------------
src/QUI/Bricks/Controls/TextAndImage.html | 13 ++++++---
2 files changed, 17 insertions(+), 29 deletions(-)
diff --git a/src/QUI/Bricks/Controls/TextAndImage.css b/src/QUI/Bricks/Controls/TextAndImage.css
index 3ec0e86..39eae01 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.css
+++ b/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 {
diff --git a/src/QUI/Bricks/Controls/TextAndImage.html b/src/QUI/Bricks/Controls/TextAndImage.html
index 262286f..aabe1ce 100644
--- a/src/QUI/Bricks/Controls/TextAndImage.html
+++ b/src/QUI/Bricks/Controls/TextAndImage.html
@@ -1,11 +1,18 @@
{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}
--
GitLab