0

私が取り組んでいるプロジェクトに素敵なホバー効果を作成しようとしていますが、隠されたオーバーフローがサファリで機能していないようです。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;
}
4

1 に答える 1

1

トランジションを次から変更します。

transition: all .5s ease;

に：

transition: border .5s ease;

そして、CSS と HTML を投稿して、他の人が問題を確認できるようにします。

于 2013-08-12T18:51:01.390 に答える