Frage zu transition und position

[JürgenB]

Hallo,

ich habe ein DIV "irgendwo" auf der Seite im Seitenfluss. Bei einer Aktion, z.B. hover soll das div fast seitenfüllend werden, also position -> absolute, top und left -> 2% und width und height -> 96%. Damit das sanft passiert, habe ich transitions verwendet:

  
.m { width:200px;height:200px;margin:20px;display:inline-block }  
.JBmapdiv { width:100%;height:100%;  
            transition: width 2s, height 2s, left 2s, top 2s, position 2s }  
.JBmapdiv:hover { position:absolute;top:2%;left:2%;width:96%;height:96%;z-index:500;margin:0;  
                  transition: width 2s, height 2s, left 2s, top 2s, position 2s}  

  
<div class="m" id="m1"><div class="JBmapdiv">...</div></div>  

Das klappt aber leider nicht. Da sich ja eigentlich nur die position ändert, hat die transition auf width und height fast keinen Einfluss (100% -> 96%) und top und left springen auf 2%.

Gibt es da einen Trick, wie ich das div sanft von seiner Position in der Seite auf volle Größe übergehen lassen kann?

Gruß, Jürgen