Переполнение скрыто, не работающее с зависанием

У меня есть этот div, и я хочу показать title, когда я навешиваю над title div. Проблема в том, что я получаю эффект наведения, даже если я навешиваю по краям div. Таким образом, div рассматривается как квадрат, а не как круг, когда я нахожу его. Это очень хорошо работает в Firefox, но не в Chrome и Safari.

Fiddle: http://jsfiddle.net/roeg629c/2/

Примечание. Я не хочу изменять соотношение сторон изображения. Изображение должно быть 100% of the parent height.

HTML

<div class="video_wrap update" video_name="rikthejmna">
    <div class="related img_wrap"><img src="http://img.youtube.com/vi/XyzYVpJGRG8/hqdefault.jpg"></div>
    <div class="title">rikthejm na</div>
</div>

CSS

.video_wrap {
    width: 232px;
    height: 232px;
    display: inline-block;
    border-radius: 116px;
    overflow: hidden;
    margin: 10px;
    position: relative;
    z-index: 2;
}

.img_wrap img {height: 100%}

.related {height: 100%;}

.title {
    position: relative;
    top: -50px;
    left: 0px;
    background: #fff;
    height: 50px;
    opacity: .5;
    color: #f8008c;
    font-size: 12px;
    text-align: center;
    line-height: 50px;
    overflow: hidden;
    cursor: default;
    transition: all .5s ease-in;
}

.title:hover {opacity: 1}

Ответ 1