Anordnung geht nicht

[in-power]

Hallo,

ich will das bei Mouse Over das Bild in Groß kommt.
Soweit geht alles.
Nun soll aber das große Bild über dem Text liegen.
Hier mal der Code:

<style type="text/css">
#zoom {
    z-index:1;
    position:relative;
    float:right;
}
    
#image_cont {
    z-index:2;
    position: relative;
    width:<?php echo $neueBreite_tr ?>px;
    height:<?php echo $neueHoehe_tr ?>px;
    border: 2px solid #947045;
    border-radius: 6px;
    box-shadow: 3px 5px 7px #72281b;
    margin-left:10px;
    margin-bottom:10px;
    margin-right:10px;
    background-size:contain;
    background-repeat:no-repeat;
    transition:width 0.5s, height 0.5s;
    -moz-transition:width 0.5s, height 0.5s; /* Firefox 4 */
    -webkit-transition:width 0.5s, height 0.5s;/* Safari and Chrome */
    -o-transition:width 0.5s, height 0.5s;/* Opera */
}
#image_cont:hover {
    width:<?php echo $breite_tr ?>px;
    height:<?php echo $hoehe_tr ?>px;
}
</style>

Bild kommt dann hier:

<div id="zoom">
<div id="image_cont" style="background-image:url('<?php echo $bild_tr ?>');"></div>
</div>
<h3><i>Z

Weiß mir jemand rat?
Danke

[Kropff]

Gib dem #image_cont mal ein position: absolute;

Peter