Overflow hidden not working on hover

Question

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.

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.

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}

Generally, what you need to do is add border radius to the .title element that will match the .video_wrap — Alon Eitan
– Alon Eitan, Commented Nov 8, 2015 at 15:16
@Alon That makes sense and I thought of it and tried it already, but..... No, it didn't work. Now thinking about it again, of course it wouldn't work otherwise it would've worked already with the current border radius on the main div. — Racil Hilan
– Racil Hilan, Commented Nov 8, 2015 at 15:23
The good and surprising news, it works properly in IE11. The bad news, I tried it on a simple one div with border radius and it did not work in Chrome, so I guess it is a Chrome behaviour. I cannot think of any possible workaround except the complex defining a region and events in JavaScript. — Racil Hilan
– Racil Hilan, Commented Nov 8, 2015 at 15:28
I know, but I cannot think of any workaround in CSS....... Well.... Perhaps we can do it with an overlay instead of overflow:hidden. That will be a bit complex, so give me some time to figure it out. — Racil Hilan
– Racil Hilan, Commented Nov 8, 2015 at 15:36

Felix A J · Accepted Answer · 2015-11-08 15:51:51Z

8

Avoid positioning of the .title, and opacity.

.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;
}

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

answered Nov 8, 2015 at 15:51

Felix A J

6,5003 gold badges29 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M1X Over a year ago

Thanks. So the height of title is achieved by using margins?

Felix A J Over a year ago

Yes, made the image div absolute and pushed down title by margin

Collectives™ on Stack Overflow

Overflow hidden not working on hover

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related