Teaser Background Zoom

Shopware 5 Themes & Design
1

Hallo Zusammen,

Wir bearbeiten gerade die Teaser:

Wir möchten gerne, dass wenn man über die Teaser mit der Maus fährt der Hintergrund ein wenig gezoomt wird.(Hover)

versucht habe Ich das so:

.category-teaser--link:hover {
         transform: scale(1.2);
             
         .category-teaser--title{
         .unitize(font-size, 14);
         color:#fe9a10;
         }
   }

so wird allerdings der Ganze Teaser in seiner Größe verändert, gibt es eine Möglichkeit nur das Hintergrundbild anzusprechen?

 

Beste Grüße

 

2

Habe das bei mir im Listing so gelöst:

.product--image .image--element:hover{
		 transform: scale(1.1,1.1);
		backface-visibility: hidden;
	}

Villeicht kannst du damit etwas anfangen

VG Zeljko

3

Hallo,

das hilft mir noch nicht so wirklich

Mein Problem ist, im moment wir der Gesamte Teaser vergrössert, eigentlich soll aber nur der Background angesprochen werden.

Nur weiß ich nicht wie ich von Background-size: cover zoomen kann:
 

 .category-teaser--link {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: transparent;
        transition: all .5s;
        
    }
   
     .category-teaser--link:hover {
        
         transform: scale(1.1,1.1);
         backface-visibility: hidden;
         .category-teaser--title{
         .unitize(font-size, 14);
         color:#fe9a10;
         }
   }

 

4 
.category-teaser--link:hover {
    background-size: 150%;
}

Wie sieht es damit aus? 

Viele Grüße

5

Ja, das würde Grundsätzlich gehen.

Aber die Bilder werden ja vorher durch:

 background-size: cover;

angepasst, die original Grafiken sind ja zum Teil viel größer als der angepasst Ausschnitt.

So wird das durch die 150% zum Teil viel zu groß gezoomt.