6

我正在制作一个可以 100% 悬停在边界半径内的图像。
当您将其悬停时，图像将缩放。现在问题来了。当我将其悬停时，您将在边界半径外看到图像 1 秒。

它似乎在 Firefox 中工作。但不是在 chrome 和 Safari 中。

现场演示：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 */

我希望有人知道它的问题。

4

3 回答 3

2

可悲的是，这是 chrome 版本 27.0.1453.116 m 上的错误。这里描述的是错误 62363

当您overflow:hidden与transform: scale(1.45)

一种在设计方面效果很好的解决方法就是删除overflow:hidden. div.rounded-smallborder section（只是解决问题的一个选项）。您可以在此处查看预览。小提琴示例

希望能帮助到你。

于 2013-07-04T08:45:18.040 回答
2

我编辑了你的代码在这里查看结果

它带有缩放和溢出的镀铬BUG。

对于具有（溢出：隐藏）的容器添加（在你的情况下是div.rounded-smallborder section）

position:relative;
z-index:1;
于 2016-02-07T09:49:14.167 回答
1

似乎是一个引擎错误。将边界半径也添加到图像标签应该可以解决问题。

 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/

于 2013-07-04T07:34:34.433 回答