Question

如何为此翻转添加转换？

到目前为止，这是我的css：

.img-container {
  width: 401px;
  height: 267px;
  position: relative;
}

.img-container:hover .square-icon {
  display: block;
}

.square-icon {
  opacity: .5;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background: url(images/zoom-icon.png) center center no-repeat; 
  background-color: #FF3860;
  cursor:pointer;
  display:none;
}

这是html：

<div class="img-container">
  <img alt="lorem" width="401" height="267" src="images/450-300-13.png">
  <div class="square-icon"></div>
</div>

我知道我需要添加：

transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;

但我不知道在哪里添加它？

Answer 1

您需要将.square-icon的两种状态（正常和悬停）设置为具有不同的不透明度，然后您可以在不透明度上进行转换。

请参阅我的jsBin演示here

.img-container:hover .square-icon {
  opacity: 1; 
}

.square-icon {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background: url(images/zoom-icon.png) center center no-repeat; 
  background-color: #FF3860;
  cursor:pointer;
  opacity: 0; 
  transition: display 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -webkit-transition: opacity 2s ease-in-out;
}

如何为此翻转添加转换？

1 个答案: