悬停时背景图像的CSS过渡？

majan 发表于 Dev

马詹

我正在处理我想在悬停效果上使用背景图像的网页，但是我有一些问题。图像在悬停时显示 tranisiton 但是当我移回鼠标时，过渡不起作用并且看起来不太好 - 没有悬停效果，我希望它很清楚。我也想对悬停使用 scall 效果，但我没有额外的包装，因为内容是由 joomla 中的附加模块生成的。

我也尝试使用不透明度实现解决方案，但由于没有额外的包装器，我失去了边框。

到目前为止，这是我在网站 test3.reksio.net 上的代码

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in;
background-position: center;
background-size: cover;
}

奥林·佐洛夫

这是你想要达到的目标吗？

div{
  width: 500px;
  height: 500px;
}
div:before{
  content:'';
  transition: all 0.7s; 
  position: absolute;
  width: 500px;
  height: 500px;
  background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
  background-position: center;
  background-size: cover;
  opacity: 1;
}

div:hover:before{
  opacity: 0;
}

div:hover span{
    opacity: 1;
}