Hoover Effekt zoombares Bild gesucht

Hallo Leute,
ich suche folgenden Hoover Effekt vielleicht als Plugin oder auch als Codeschnipsel.

Wenn man mit der Maus auf ein Bild fährt, dass dann das Bild unterhalb der Maus herangezoomt (vergrößert dargestellt) wird.

Wie heißt dieser Effekt und wo kann ich ihn finden?
Ich habe mir schon einige Anleitungen von Hoover-Plugins angeschaut, aber dieser von mir gewünschte Effekt war bei den Anleitungen nicht dabei.
Auch habe ich mir schon einige Lightboxen angeschaut - da war aber auch dieser Effekt nicht dabei.

Danke fürs lesen.

Gruß Frank

Vielen Dank für die schnelle Antwort, werde ich ausprobieren.

Gruß Frank

Vielen Dank, im Prinzip funktioniert es.
Aber zum einen hätte ich gerne, dass (in meinem Fall) der "äussere Rahmen" mitwachsen soll.
Welche Parameter muss ich da ändern? (Habe keine Ahnung von CSS).
Und zum anderen, welche Parameter muss ich ändern um einen stärkeren oder schwächeren Hoovereffekt zu erzielen?

Vielen Dank noch einmal.

Gruß Frank

Vielen Dank für deine Hilfe.

Gruß Frank

So, ich habe mich jetzt mal mit dem Hoover-Effekt beschäftigt, bekomme aber eine Sache nicht so hin wie ich es gerne hätte.
Der "äussere Rahmen" des Bildes soll nicht mitwachsen wenn man die Maus auf das Bild bewegt. Sondern nur das Bild innerhalb des Rahmens soll herangezoomt werden.
Ich habe herausgefunden, wenn man in der CSS unterhalb von

display: inline-block;

genau die Breite und Höhe des Bildes selbst angibt, dass dann der äussere Rahmen seine Größe nicht verändert (so wie ich es haben will).
Nun will ich ja den Container für unterschiedlich große Bilder verwenden, deshalb ist hier eine fixe Größe kontraproduktiv.
Ich habe schon versucht die Pixelangaben mit

width: 100%;
height: 100%;

auszutauschen - das wurde aber ignoriert.

Kann mir jemand sagen, wie ich die festen Werte so austauschen kann, dass ich unterschiedlich große Bilder mit ein- und demselben Container benutzen kann?
Ich möchte halt nicht für jedes Bild für das ich diesen Hoover Effekt haben möchte aber andere Abmessungen hat einen separaten Container anlegen müssen.

Hier der momentane CSS-Code

/* Zoombares Bild 1*/
     .img-hover-zoom1 {
         display: inline-block;
         width: 300px;
         height: 225px;
         overflow: hidden;
}
     .img-hover-zoom1 img {
         transition: transform 0.6s ease;
}
     .img-hover-zoom1:hover img {
         transform: scale(1.5);
}

Hier ein LINK zur Testseite

Danke fürs lesen.

Gruß Frank

Danke vielmals, hat geklappt.

Ja, ich hatte vergessen den Refresh-Button des Browsers zu betätigen. :mad:
Ich habe jetzt umgestellt dass das erste Bild die ursprüngliche Konfiguration zeigt, und die zweite nun den korrekten container.
Vielen Dank nochmals.

Gruß Frank