Css Image Hover inside Border-Radius - css

Question

I'm making an image that can be hovered inside a border-radius with 100%.
And when you hover it the image will scale. Now comes the problem. When I hover it, you will see the image for 1 sec outside the border-radius.
It seems to be working in Firefox. But not in chrome and Safari.
Live Demo:
http://jewelbeast.com/something/imghover/rounded.html
HTML:
<div class="rounded-smallborder">
<section class="img-scale img-opacity" style="width: 250px; height: 250px;">
<img src="http://placehold.it/250x250" />
<div class="text">
<span>
<h1>This is a title</h1>
<ul>
<li>List number 1</li>
<li>List number 2</li>
<li>List number 3</li>
</ul>
</span>
</div>
</section>
</div>
CSS:
div.rounded-smallborder{
margin-top: 22px;
margin-bottom: 22px;
height: 362px;
width: 228px;
float: left;
display: block;
margin-left: 10px;
}
div.rounded-smallborder section{
position: relative;
width: 217px;
height: 217px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
border: 5px solid white;
-webkit-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
-moz-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
-ms-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
-o-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
float:left;
text-align: center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
overflow: hidden;
background: #dfdfdf;
}
div.rounded-smallborder section img{
position: absolute;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
left: 0%;
}
div.rounded-smallborder section.img-slideleft:hover img{
margin-left: -35px;
}
div.rounded-smallborder section.img-zoomin:hover img{
width: 550px;
}
div.rounded-smallborder section.img-slideup:hover img{
margin-top: -35px;
}
div.rounded-smallborder section.img-opacity:hover img{
opacity: 0.2;
}
div.rounded-smallborder section.img-diagonal:hover img{
margin-top: -35px;
margin-left: -35px;
}
div.rounded-smallborder section.img-rotation:hover img{
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.img-scale:hover img{
-webkit-transform:scale(1.45);
-o-transform:scale(1.45);
-moz-transform:scale(1.45);
-ms-transform:scale(1.45);
transform:scale(1.45);
}
/* Text effecten */
div.rounded-smallborder section.txt-slideinleft .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:-250px;
}
div.rounded-smallborder section.txt-slideinleft:hover .text{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftTitle .text span h1{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:-250px;
}
div.rounded-smallborder section.txt-slideinleftTitle:hover .text span h1{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinright .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinright:hover .text{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinrightTitle .text span h1{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinrightTitle:hover .text span h1{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftRightAll .text span h1{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:-250px;
}
div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span h1{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftRightAll .text span p{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span p{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftRightAll .text span a{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span a{
}
div.rounded-smallborder section.txt-opacityAll .text span h1{
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
transition-delay: 0s;
-webkit-transition-delay: 0s; /* Safari */
-moz-transition-delay: 0s; /* Safari */
-ms-transition-delay: 0s; /* Safari */
-o-transition-delay: 0s; /* Safari */
opacity: 0;
}
div.rounded-smallborder section.txt-opacityAll:hover .text span h1{
opacity: 1;
}
div.rounded-smallborder section.txt-opacityAll .text span p{
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
transition-delay: .5s;
-webkit-transition-delay: .5s; /* Safari */
-moz-transition-delay: .5s; /* Safari */
-ms-transition-delay: .5s; /* Safari */
-o-transition-delay: .5s; /* Safari */
opacity: 0;
}
div.rounded-smallborder section.txt-opacityAll:hover .text span p{
opacity: 1;
}
div.rounded-smallborder section.txt-opacityAll .text span a{
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
transition-delay: 1s;
-webkit-transition-delay: 1s; /* Safari */
-moz-transition-delay: 1s; /* Safari */
-ms-transition-delay: 1s; /* Safari */
-o-transition-delay: 1s; /* Safari */
opacity: 0;
}
div.rounded-smallborder section.txt-opacityAll:hover .text span a{
opacity: 1;
}
div.rounded-smallborder section.txt-slideintop .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top:-450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideintop:hover .text{
margin-top: 0px;
}
div.rounded-smallborder section.txt-slideinbottom .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top:450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinbottom:hover .text{
margin-top: 0px;
}
div.rounded-smallborder section.txt-longopacity .text{
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
margin-left: -250px;
opacity: 0;
}
div.rounded-smallborder section.txt-longopacity:hover .text{
margin-left: 0px;
opacity: 1;
}
div.rounded-smallborder section.txt-slideinleftRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left: -250px;
}
div.rounded-smallborder section.txt-slideinleftRotation:hover .text{
margin-left: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.txt-slideinrightRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinrightRotation:hover .text{
margin-left: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.txt-slideintopRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top: -450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideintopRotation:hover .text{
margin-top: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.txt-slideinbottomRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top: 450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinbottomRotation:hover .text{
margin-top: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
/* End of text effecten */
div.rounded-smallborder section .text{
position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%;
display:table;
margin-left: -250px;
}
div.rounded-smallborder section:hover .text{
margin-left: 0px;
}
div.rounded-smallborder section span{
width: 200px;
display: table-cell;
vertical-align: middle;
padding: 20px;
color: black;
opacity: 0;
text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
}
div.rounded-smallborder section:hover span{
opacity: 1;
}
div.rounded-smallborder section:hover img{
opacity: 0.5;
}
div.rounded-smallborder section span h1{
width: 100%;
text-align: center;
font-size: 18px;
font-family: Verdana, sans-serif;
font-weight: bold;
line-height: 25px;
margin-bottom: 3px;
}
div.rounded-smallborder section span p{
width: 100%;
text-align: center;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
div.rounded-smallborder section span ul{
list-style-position:inside;
}
div.rounded-smallborder section span ul li{
width: 100%;
text-align: center;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
line-height: 15px;
}
div.rounded-smallborder section span a.button{
display: table;
margin: 0px auto;
text-align: center;
color: white;
text-shadow: none !important;
text-decoration: none;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
padding: 9px 10px 11px 10px;
border: 1px solid #000000;
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */
background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */
}
div.rounded-smallborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
/* END */
I hope someone know the problem of it.

Answer 1

Sadly it's a bug on chrome Version 27.0.1453.116 m .Which is describe it here bug 62363
It occurs when you use overflow:hidden in mix with transform: scale(1.45)
A workaround, that works well in the design aspect is just remove the overflow:hidden on the div.rounded-smallborder section . (just an option to workaround the issue). You can take a look at the preview here. fiddle example
Hope it helps.

Answer 2

I edited your code see results here
it chrome BUG with scale and overflow .
for the container that have the ( overflow:hidden )
add ( in your case its the div.rounded-smallborder section )
position:relative;
z-index:1;

Answer 3

seems to be an engine bug.
Adding border-radius also to the image tag should solve the problem.
div.rounded-smallborder section img{
position: absolute;
border-radius: 100%; /*added line*/
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
left: 0%;
}
http://jsfiddle.net/5RA4m/