溢出隐藏不起作用于悬停-Overflowhiddennotworkingonhover

I have this div and I want to show the title when I hover over title div. The problem is that I get the hover effect even if I hover on the edges of the div. So the div is treated as a square and not as a circle when I hover on it. This works pretty well on Firefox but not on Chrome and Safari.

我有这个div,当我将鼠标悬停在标题div上时,我希望显示标题。问题是,即使我将鼠标悬停在div的边缘,我也会获得悬停效果。所以当我将鼠标悬停在它上面时,div被视为一个正方形,而不是一个圆圈。这在Firefox上运行得很好,但在Chrome和Safari上却不行。

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

Note: I do not want to change the aspect ratio of the image. The image should be 100% of the parent height.

注意:我不想更改图像的宽高比。图像应为父高度的100%。

HTML

    

    
rikthejm na

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 个解决方案

.video_wrap{
width: 232px;
height: 232px;
border-radius: 50%;
overflow: hidden;
margin: 10px;
}
.related {
width: 232px;
height: 232px;
position: absolute;
border-radius: 50%;
overflow: hidden;
z-index: -1;
}
.img_wrap img {
height: 100%;
}
.title{
margin: 185px 0 0;
background: rgba(255,255,255,.5);
line-height: 50px;
text-align: center;
transition: all .5s ease-in;
}
.title:hover{
  background: #fff;
}

    rikthejm na