如何在一个图像上实现多个图标悬停过渡

Question

我想在图像上实现两种悬停效果。

首先，当用户将鼠标悬停在图像上时，会出现图像右上角的加号图标。

其次，当用户将鼠标悬停在加号上时，图标将变为：“添加到收藏集”。

所有这些事件都需要平稳过渡。

我的第一个问题是我无法在第一次悬停时获得任何平滑过渡。

我的第二个问题是我不知道如何实现第二次悬停 - 我已经完成了很多谷歌搜索，但这似乎并不常见。

这是我到目前为止尝试过的代码（填充murray占位符图片）：

HTML：

<div class="item">
      <a href="#" class="item-link">
        <img src="https://www.fillmurray.com/g/582/580" alt="dimsum"> 
      </a>                  
    </div> 

CSS：

.item-link:hover:before {
  content: '';
  display: block;  
  position: absolute;
  width: 58px;
  height: 58px; 
    background-image: url('http://i.imgur.com/bWcylV3.png');
  border-radius: 50%;  
  top: 10px;
  right: 10px;
}

这是js fiddle

以下是第二个悬停时我想要实现的截图：

Answer 1

只是对您的标记进行了一些更改，并为您的问题找到解决方案。是的，:hover pseudo-element无效。为方便起见，添加了新的div btn-plus和span文本。这是使用纯css完成的。希望这会有所帮助：）

＆＃13;

＆＃13;

.btn-plus:before {
  content: '';
  display: block;  
  position: absolute;
  width: 58px;
  height: 58px; 
    background-image: url('http://i.imgur.com/bWcylV3.png');
  border-radius: 50%;  
  top: 0px;
  right: 30px;
  z-index: 1;
}
.btn-plus{
  position: absolute;
  display: block;
  width: 200px;
  height: 58px;
  top: 30px;
  right: 0;
  opacity : 0;
  transition: all ease .5s;
}
.item-link{
  width: 100%;
  height: 100%;
  display: block;
}
.item-link img{
  width: 100%;
}
span.text{
  position : absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  padding: 15px;
  width: 150px;
  height: 30px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.5); 
  z-index: 0;
  transition: all ease .5s;
   opacity : 0;
}
.item-link:hover .btn-plus{
   opacity : 1;
}
.btn-plus:hover span{
   opacity : 1;
  right: 30px
}

＆＃13;

<div class="item">
      <a href="#" class="item-link">
        <img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
        <div class="btn-plus">
            <span class="text">Add to list</span>
        </div> 
      </a>                  
    </div>

＆＃13;

＆＃13;

＆＃13;