CSS – Fixing edges after hovering on a rounded image - html

Question

I've created div element, and I also added a border-radius attribute to make the div more aesthetically pleasing. I also added a -webkit-transition: opacity .25s ease attribute to the div to create a transition to a dark overlay when the user hovers over the div. Then, I run into a problem which can be explained by these images.
Cursor outside the div element:
Moving the cursor inside the div element:
The cursor is fully inside the div element:
So, I guess this is a problem with the transition and it's caused by the rounded border of the image. It's kind of annoying and I'd like to remove it but I don't know how to. I've attached the code here:
Note: .memX (where X is a number) refers to each div element. There are like 10 .mem elements.
mem1, .mem2, .mem3, .mem4, .mem5, .mem6, .mem7, .mem8, .mem9, .mem10 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
overflow: hidden;
}
.overlay {
background: rgba(0,0,0,.4);
text-align: center;
height: 100px;
width: 100%;
padding: 45px 0px 66px 0px;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.insidetext {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-weight: lighter;
color: rgba(255,255,255,.85);
font-size: 1.5em;
margin-top: 35px;
}
.mem1:hover .overlay, .mem2:hover .overlay, .mem3:hover .overlay, .mem4:hover .overlay, .mem5:hover .overlay, .mem6:hover .overlay, .mem7:hover .overlay, .mem8:hover .overlay, .mem9:hover .overlay {
border-radius: 10px;
opacity: 1;
}
.mem1 {
background-image: url(members/giles.png);
}
This seems to be a problem in general. You can see this particular problem in action on this CodePen: http://codepen.io/ianfarb/pen/ikeAf

Answer 1

Try using this..
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
position: relative;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
/*padding: 45px 0 66px 0;*/
display: table;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
display: table-cell;
vertical-align: middle;
}
http://codepen.io/anon/pen/VLBqvE

Answer 2

Hmm I'm confused as to why you've got so many mem classes. Class names can be reused, ID selectors cannot. So why have .mem1 and so on when you could simply have .mem?
Anyway, to fix your problem all you need to do is add border-radius:5px; to #overlay and that should give you your desired effect.

Answer 3

I your example you have two div one is parent (box) and another is chilled(overlay) and you apply border to parent and your hover effect is on chilled so when you hover it will apply transition on chilled. and chilled has no border-radius: 5px; so apply border-radius: 5px; to your chilled id also. so i think its an overflow issue
But you can try this soluttion:
solution is remove delay from transition then it works because of delay it will give you problem.
See this example for removed delay from transition :http://jsfiddle.net/9phk87x8/ i think it will work for you.
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity ease;
-moz-transition: opacity ease;
}