border-radius и overflow (on hover) в Chrome/Opera

Question

У меня проблема с Chrome & Opera. Я использую border-radius для создания «div div div», и я хочу отобразить некоторый текст внутри этого div на hover.

В Firefox и IE все работает нормально. Но когда элемент (статья) зависает в Chrome/Opera, переполнение видится в течение одной секунды. Когда я удаляю курсор из элемента, переполнение видится снова (в течение одной секунды). Вы можете видеть это here. Это должно выглядеть как третье изображение.

<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

Удалить transition: all 0.2s ease-in 0s; из article .clr. Вы видите transition0.2s, поэтому вы видите эту вспышку в хроме. Подробнее о свойствах перехода here.