Hình ảnh Css Di chuột bên trong Border-Radius

Question

Tôi đang tạo một hình ảnh có thể được di chuột bên trong bán kính đường viền với 100%.
Và khi bạn di chuột lên, hình ảnh sẽ mở rộng. Bây giờ đến vấn đề. Khi tôi di chuột qua nó, bạn sẽ thấy hình ảnh trong 1 giây bên ngoài bán kính đường viền.

Dường như nó hoạt động trong Firefox. Nhưng không phải trong chrome và 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 */ 

Tôi hy vọng ai đó biết được vấn đề của nó.

Answer 1

Đáng buồn thay đó là một lỗi trên phiên bản Chrome 27.0.1453.116 m Nào là miêu tả nó ở đây bug 62363

Nó xảy ra khi bạn sử dụng overflow:hidden trong hỗn hợp với transform: scale(1.45)

Một cách giải quyết , hoạt động tốt trong khía cạnh thiết kế chỉ cần xóa overflow:hidden trên div.rounded-smallborder section. (chỉ là một tùy chọn để giải quyết vấn đề). Bạn có thể xem bản xem trước tại đây. fiddle example

Hy vọng điều đó sẽ hữu ích.

Answer 2

có vẻ là lỗi động cơ. Thêm bán kính đường viền cũng vào thẻ hình ảnh sẽ giải quyết được sự cố.

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/

Answer 3

tôi sửa mã của bạn xem kết quả here

nó BUG chrome với quy mô và tràn.

cho container mà có (overflow: hidden) add (trong trường hợp của bạn của nó div.rounded-smallborder section)

position:relative; 
z-index:1;