Bild bei Hover CSS funktioniert nicht zu 100%?

Hallo, habe hier im Forum dazu leider nix Ähnliches gefunden!

Vllt kann jemand helfen!? Ich will in eine Website eine 3-Reihe Bilder einbinden, hab ich auch schon getan. Bei Mousover ( Hover ) soll das Bild vergrößert aufgehen. Den Code dafür hab ich schon in die CSS-Box des Themes von WP eingebunden und das geht auch. Hier mal der Code:

div.elementor-element.elementor-element-8a2f3d0.elementor-column.elementor-col-33.elementor-top-column img {

width: 100%;

height: auto;

/* SCALE /

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

/* VERZÖGERUNG /

-webkit-transition: all 0.3s linear;

-moz-transition: all 0.3s linear;

-ms-transition: all 0.3s linear;

-o-transition: all 0.3s linear;

transition: all 0.3s linear;

}

div.elementor-element.elementor-element-8a2f3d0.elementor-column.elementor-col-33.elementor-top-column img:hover {

/* SCALE /

-webkit-transform: scale(1.2);

-moz-transform: scale(2.4);

-ms-transform: scale(2.4);

-o-transform: scale(2.4);

transform: scale(2.4);

}

Wie man sieht arbeite ich mit den Pagebuilder Elementor. JA, das Ganze funktioniert auch, nur mit einem Haken, dass das Hoverbild quasi unter den anderen daneben liegt, es ist also von den daneben verdeckt. Man würde jetzt denken, mach das mit z-index, leider funkt das nicht. Hab hier über CSS bzw. über den Elementor alle möglichen Varianten probiert. Weiß da jemand Bescheid, was das sein könnte? Was mir auffiel, alle Inhaltselemente vor diesem Bild liegen unterhalb, das würde dann auch passen, aber alle Inhaltselemente danach, also zuerst mal die 2 weiteren Bilder der 3-Reihe liegen dann eben über den Hoverbild und verdecken es zum Teil.

Ein Bild des Problems ist hier angehängt.