CSS Images zoomen und in den Vordergrund setzen?

[Dsimon24]

Hallo zusammen,

ich habe folgenden Code, der drei Bilder nebeneinander setzt, die sich jeweils ein bisschen überschneiden:

<div class="row view_desktop">
    <div class="col-2 offset-2">
        <img class="img_zoom" src="img/fotos/berlin_1.png">
    </div>
    <div class="col-2">
        <img class="img_zoom" src="img/fotos/berlin_2.png">
    </div>
    <div class="col-2">
        <img class="img_zoom" src="img/fotos/berlin_3.png">
    </div>
</div>

Diese Bilder möchte ich zoomen. Das funktioniert auch, jedoch sollte das jeweils gezoomte Bild
(bei Mouseover) in den Vordergrund treten und nicht von den jeweils anderen Bildern teilweise
überdeckt werden. Wie kann ich das am besten realisieren?

Folgenden CSS-Code habe ich aktuell in Verwendung:

.img_zoom {
    transition: transform .2s;
}
.img_zoom:hover {
    transform: scale(1.5);
}

Habt ihr da einen Tipp für mich?

VG,

 

[breedmaster]

Vielleicht damit? https://developer.mozilla.org/de/docs/Web/CSS/z-index