Positioned element appears outside of container on hover in Chrome

Question

I'm trying to make my own simple circular transition hover. I've got this far:

http://jsfiddle.net/zLsZE/

aside{
    width:183px;
    height:183px;
    position:absolute;
    text-align:center;
    border-radius:600px;
    -moz-border-radius:600px;
    border:10px #fff solid;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    box-shadow: 1px 1px 5px 2px #888888;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

aside:hover{
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    border-color:#ccc;
}

aside img{
    width:183px;
    height:183px;
    position:absolute;
    border-radius:600px;
    -moz-border-radius:600px;
    top:0;
    left:0;
    margin:0;
    opacity:1;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
}
aside:hover img{
    opacity:0.5;
    width:165px;
    height:165px;
    top:10px;
    left:10px;
    -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

aside h2{
    position:absolute;
    z-index:200;
    bottom:0;
    width:183px;
    margin:0;
    padding:5px 0 10px 0;
    color:#fff;
    text-transform:uppercase;
    font-size:14px;
    font-weight:bold;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background:#333;
}

<aside class="courses">
<a href="http://www.google.com">
    <h2>Courses</h2>
    <img src="http://placehold.it/183x183" alt="" />
</a>
</aside>

Works as intended in Firefox, but on Chrome (mac) the h2 element appears outside of the border-radius overflow on the container only on hover.

Any ideas for a workaround for this keeping it pure CSS?

Thanks in advance

Pat

Answer 1

I figured out a way around this - to put the images on the background of a div container inside the aside rather than them being block elements in the html...