feat: Hover effect on clickable image.

locale.xml

@@ -1776,12 +1776,12 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <en><![CDATA[If the text is larger than image, the height of the image will match the text.]]></en>
         </locale>
         <locale name="brick.textAndImage.imageZoom">
-            <de><![CDATA[Klickbare bilder]]></de>
+            <de><![CDATA[Klickbare Bilder]]></de>
             <en><![CDATA[Clickable images]]></en>
         </locale>
         <locale name="brick.textAndImage.imageZoom.desc" html="true">
-            <de><![CDATA[Wenn aktiviert, kann man die Bilder klicken um sie zu vergrößern. Bitte beachte, das funktioniert nur, wenn das QUIQQER Paket <code>quiqqer/gallery</code> installiert ist.]]></de>
-            <en><![CDATA[If activated, you can click on the images to enlarge them. Please note, this only works if the QUIQQER package <code>quiqqer/gallery</code> is installed.]]></en>
+            <de><![CDATA[Wenn aktiviert, kann man die Bilder klicken um sie zu vergrößern. Bitte beachte: das funktioniert nur, wenn das QUIQQER Paket <code>quiqqer/gallery</code> installiert ist.]]></de>
+            <en><![CDATA[If activated, you can click on the images to enlarge them. Please note: this only works if the QUIQQER package <code>quiqqer/gallery</code> is installed.]]></en>
         </locale>
         <locale name="brick.textAndImage.maxImageWidth">
             <de><![CDATA[Maximale Briete des Bildes]]></de>

src/QUI/Bricks/Controls/TextAndImage.css

@@ -14,10 +14,60 @@
     align-items: center;
     display: flex;
     justify-content: center;
+    position: relative;
+}
+
+.quiqqer-textImage-image 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 {
+    content: "\f002";
+    font-family: "FontAwesome";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -35%);
+    font-size: 5rem;
+    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 {
+    transform: translate(-50%, -50%);
+    opacity: 1;
 }
 
 .quiqqer-textImage-image 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-content {