Rand-Radius und Überlauf (bei Hover) in Chrome/Opera

Question

Ich habe ein Problem mit Chrome & Opera. Ich benutze Border-Radius, um "circle divs" zu erstellen und ich möchte etwas Text in diesem div beim Hover anzeigen.

In Firefox und IE funktioniert alles gut. Aber wenn das Element (Artikel) in Chrome/Opera schwebt, ist der Überlauf für eine Sekunde sichtbar. Wenn ich den Cursor vom Element entferne, ist der Überlauf wieder sichtbar (für eine Sekunde). Sie können es here sehen. Es sollte wie das dritte Bild aussehen.

<article> 
    <a href="/"> 
     <div class="info"> 
      <h3>Title</h3> 
     </div> 
     <img class="sw" src="images/image-sw.jpg"> 
     <img class="clr" src="images/image-colour.jpg"> 
    </a> 
</article> 

CSS:

article{ 
height: 300px; 
width: 300px; 
border-radius: 180px; 
margin: 0 auto; 
display: block; 
position: relative; 
overflow: hidden; 
background: #e3e3e3; 
padding: 5px; 
} 

.info{ 
position: absolute; 
background: #222222; 
color: #ffffff; 
height: 80px; 
width: 300px; 
top: 320px; 
padding: 10px 0; 
text-align: center; 
z-index: 2; 
overflow: hidden; 
} 

article:hover .info { 
top: 240px; 
} 

article img{ 
border-radius: 180px; 
position: absolute; 
left: 5px; 
top: 5px; 
display: block; 
} 

article .clr{ 
opacity: 0; 
transition: all 0.2s ease-in 0s; 
z-index: 1; 
} 

article:hover .clr{ 
opacity: 1; 
} 

Answer 1

Entfernen Sie die transition: all 0.2s ease-in 0s; von article .clr. Sie sehen die transition nehmen 0.2s das ist, warum Sie sehen, dass Flash in Chrom. Sie können mehr über die Übergangseigenschaft here lesen.