# Teaser Background Zoom

**URL:** <https://forum.shopware.com/t/teaser-background-zoom/46946>\
**Category:** Themes & Design\
**Created:** [16. Juli 2017 um 17:53 UTC](https://forum.shopware.com/t/teaser-background-zoom/46946 "2017-07-16T17:53:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\
**Post date:** [16. Juli 2017 um 17:53 UTC](https://forum.shopware.com/t/teaser-background-zoom/46946/1 "2017-07-16T17:53:40Z")

</div>

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?

> **[PORTALTECH REPLY - WORLD LEADER HYBRIS PARTNER](https://portaltech.reply.com/portaltech/en/)**
>
> Portaltech Reply is the leading hybris Partner with Platinum Elite Status and Global Partner of the Year.

&nbsp;

Beste Grüße

&nbsp;

---

<div class="post-metadata">

**Author:** ![hds](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@hds](https://forum.shopware.com/u/hds)\
**Post date:** [16. Juli 2017 um 20:10 UTC](https://forum.shopware.com/t/teaser-background-zoom/46946/2 "2017-07-16T20:10:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\
**Post date:** [18. Juli 2017 um 09:51 UTC](https://forum.shopware.com/t/teaser-background-zoom/46946/3 "2017-07-18T09:51:26Z")

</div>

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:  
&nbsp;

```
 .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;
         }
   }

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\
**Post date:** [18. Juli 2017 um 17:57 UTC](https://forum.shopware.com/t/teaser-background-zoom/46946/4 "2017-07-18T17:57:41Z")

</div>

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

```

Wie sieht es damit aus?&nbsp;

Viele Grüße

---

<div class="post-metadata">

**Author:** ![QuasiPasi](https://avatars.discourse-cdn.com/v4/letter/q/35a633/32.png) [@QuasiPasi](https://forum.shopware.com/u/QuasiPasi)\
**Post date:** [18. Juli 2017 um 18:09 UTC](https://forum.shopware.com/t/teaser-background-zoom/46946/5 "2017-07-18T18:09:46Z")

</div>

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.