Question

我正在尝试为我正在处理的项目创建一个漂亮的悬停效果，隐藏的溢出似乎不适用于safari看一看。 learn.michaelscimeca.com

HTML：

<div class="thumnnail">
  <img class="mainbg" src="img/shoppee.jpg" alt="">
  <div class="textbox">
    <img src="/img/eye.png" alt="">
    <span class="launch"><a href="http://www.shoppedelee.com">View Project</a></span>
  </div>
</div>

CSS：

.thumnnail .textbox .launch a {
  margin-left: -78px;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 15px 40px;
  position: absolute;
  top: 45px;
  left: 50%;
  background-color: #1c51c8;
  border-radius: 100%;
  text-transform: uppercase;
  -ms-transition: all .5s ease;
  /* this is for the animation effect to bring the textbox down to up and up to down */

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.thumnnail .textbox .launch a:hover {
  background-color: #093db4;
}
.thumnnail:hover {
  border: 10px solid #0d46c8;
  /* this is to alter the border on rollover */

  border-radius: 100%;
  /* this is to round out the div tag */

  /* to get rid of the greyscale on rollover */

  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  overflow: hidden! important;
}
.thumnnail:hover img {
  /* width:120%;
    height:120%;*/

}
.thumnnail:hover .textbox {
  height: 100px;
}

Answer 1

更改您的转换：

transition: all .5s ease;

为：

transition: border .5s ease;

然后发布您的CSS和HTML，以便其他人可以看到问题所在。

溢出隐藏无法正常使用半径边框

1 个答案: