(Sorry Matthias, war schon fertig als ich deine Mahnung gesehen habe) Hallo Mika, ich denke, du meinst [sowas hier](https://jsfiddle.net/2ngz8knp/). Aber Matthias hat recht, bevor man Codewüsten ins Forum postet, baut man das Problem entweder in einem Weblabor wie JSFiddle oder CodePen nach oder schickt gleich den Link auf die eigene Seite. Hoffentlich brauchst Du die ganze Wrapperei nicht für andere Dinge; für deinen Zoom-Effekt jedenfalls nicht. Dafür reicht ~~~html <div class="zoomBox"> <a class="car-one" href="#">Mercedes</a> </div> ~~~ Dein CSS habe ich für's Forum mal um "unwichtige" Definitionen bereinigt (html/body/Media Query), es reduziert sich etwas. Die Font-Angabe musst Du noch ändern, nur Arial ist zu wenig für's Web. Was hier entsteht, ist ein Wrapper zum Zentrieren, darin das a als Textträger und Link. Über ::before wird das Bild eingehängt und mit position:absolute und z-index:-1 unter den Text geschoben. Dass a das Hauptelement ist, hat den weiteren Vorteil, dass man es ohne weiteres fokussieren kann. Das ging mit div nicht. Die ganzen Vendor-Präfixe habe ich weggelassen. Soweit ich weiß, sind die bei diesen Eigenschaften für aktuelle Browser nicht mehr nötig. ~~~css .zoomBox { max-width: 800px; height: 300px; margin-left: auto; margin-right: auto; border: none; overflow: hidden; position: relative; } .zoomBox a { display: block; height: 100%; width: 100%; padding-top: 1em; vertical-align:top; text-decoration: none; color: #ffffff; font-family: arial; text-align: left; font-size: 15px; } .zoomBox a::before { content:""; width: 100%; height: 100%; position: absolute; top: -1em; z-index: -1; transition: all 0.5s; filter:none; background-image: url(http://webwonder-media-test.info/wp-content/uploads/2018/03/amg-1880381_1920.jpg); background-size: 100%; background-repeat: no-repeat; } .zoomBox a:hover::before, .zoomBox a:focus::before { transform: scale(1.05); filter: saturate(2); } ~~~ Wie ich mich kenne, kriege ich jetzt noch ein paar Korrekturen um die Ohren gehauen 😀 _Rolf_ -- sumpsi - posui - clusi

(Sorry Matthias, war schon fertig als ich deine Mahnung gesehen habe) Hallo Mika, ich denke, du meinst [sowas hier](https://jsfiddle.net/2ngz8knp/). Aber Matthias hat recht, bevor man Codewüsten ins Forum postet, baut man das Problem entweder in einem Weblabor wie JSFiddle oder CodePen nach oder schickt gleich den Link auf die eigene Seite. Hoffentlich brauchst Du die ganze Wrapperei nicht für andere Dinge; für deinen Zoom-Effekt jedenfalls nicht. Dafür reicht ~~~html <div class="zoomBox"> <a class="car-one" href="#">Mercedes</a> </div> ~~~ Dein CSS habe ich für's Forum mal um "unwichtige" Definitionen bereinigt (html/body/Media Query), es reduziert sich etwas. Die Font-Angabe musst Du noch ändern, nur Arial ist zu wenig für's Web. Was hier entsteht, ist ein Wrapper zum Zentrieren, darin das a als Textträger und Link. Über ::before wird das Bild eingehängt und mit position:absolute und z-index:-1 unter den Text geschoben. Dass a das Hauptelement ist, hat den weiteren Vorteil, dass man es ohne weiteres fokussieren kann. Das ging mit div nicht. ~~~css .zoomBox { max-width: 800px; height: 300px; margin-left: auto; margin-right: auto; border: none; overflow: hidden; position: relative; } .zoomBox a { display: block; height: 100%; width: 100%; padding-top: 1em; vertical-align:top; text-decoration: none; color: #ffffff; font-family: arial; text-align: left; font-size: 15px; } .zoomBox a::before { content:""; width: 100%; height: 100%; position: absolute; top: -1em; z-index: -1; transition: all 0.5s; filter:none; background-image: url(http://webwonder-media-test.info/wp-content/uploads/2018/03/amg-1880381_1920.jpg); background-size: 100%; background-repeat: no-repeat; } .zoomBox a:hover::before, .zoomBox a:focus::before { transform: scale(1.05); filter: saturate(2); } ~~~ Wie ich mich kenne, kriege ich jetzt noch ein paar Korrekturen um die Ohren gehauen 😀 _Rolf_ -- sumpsi - posui - clusi