Overflow:hidden will nicht funktionieren

[Max T.]

Hallo zusammen,
ich suche momentan schon seit rund einer viertel Stunde nach einer Lösung für ein Problem und verzweifle gerade, weil es mir unlogisch erscheint: Ich habe ein Bild, über welches beim Hovern ein div eingeflogen werden soll.
Hier mal der Code:

 <div id="container">    
 <div id="overlay">    </div>        
 <img src="#" alt="#" class="bild">      
</div>

Und CSS:

#container   
      {position: relative;
        overflow: hidden;

         width: 250px;
         height: 300px;
         }


#overlay    
       {position: absolute;

         width: 250px;
         height: 300px;

         margin-left: -250px;

         transition: margin 400ms ease-in-out; 

         background: #999999;
         }

#container:hover #overlay
        {margin-left: 0px;
         }

So weit, so gut. Die Box fliegt auch wie geplant beim hovern über das Bild. Nur solange nicht gehovert wird, sollte sie ja durch das "Overflow: hidden" nicht sichtbar sein - ist sie aber doch, neben dem Bild. Wie bekomme ich sie versteckt?
Ich hoffe, ihr könnt mir helfen! :?

PS: Ich möchte nicht "width" beim hovern verändern sondern "margin", damit der Text ordenlich dargestellt wird; mit width würde es nämlich sogar klappen..

 

[Waffelheld]

Hallo,

mit dem Quelltext, den du gepostet hast, funktioniert es einwandfrei. die Ursache muss woanders liegen.

 

[Max T.]

? Seltsam, habe nur die Variablen ausgetauscht...welches Browser verwendest du? Bei mir ist es Google Chrome, müsste der aktuelle sein, aber damit müsste es dann ja auch gehen...
VG