This is my HTML:
http://jsfiddle.net/aALJ6/ (you may use this for reference)
<article>
<a href="http://www.somepage.com">
<header>
<div class="details">
<h1>Title</h1>
<p>More text</p>
</div>
</header>
<span class="bw-wrap"><img src="http://lorempixel.com/353/324/sports/" alt="NASA Space Apps Challenge" class="bw" /></span>
<span class="clr-wrap"><img src="http://lorempixel.com/353/324/sports/" alt="NASA Space Apps Challenge" class="clr" /></span>
</a>
</article>
Here is the accompanying CSS:
article {
background:#d0d0d0;
border:1px solid #b9b9b9;
border-radius:150px;
float:left;
margin:0 0 30px 30px;
overflow:hidden;
padding:9px;
position:relative;
transition:all 0.2s ease-in;
-webkit-transition:all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
width:280px;
height:280px
}
img {
border-radius:140px;
position:absolute;
top:9px;
left:9px;
overflow: hidden;
}
.clr {
opacity:0;
z-index:1;
transition:all 0.2s ease-in;
-webkit-transition:all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
-o-transition:all 0.2s ease-in
}
article:hover.clr {
opacity:1
}
.portfolio-single {
float:left;
padding-bottom:30px;
position:relative;
width:100%
}
article:hover {
background:#272123;
border:1px solid #272123
}
h1 {
position: absolute;
left: 65px;
top: -20px;
z-index:100;
text-align:center;
}
p {
position: absolute;
left: 95px;
top: 30px;
z-index:100;
text-align:center;
}
The issue at hand lies in containing the dark rectangle within the circular article/img element during the opacity animation. While normal clipping works fine, the full rectangle is displayed only when the opacity reaches 100%, disrupting the desired look.