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

Question

我正在处理我想在悬停效果中使用背景图片的网页，但是我遇到了一些问题。图像在悬停时显示为带有过渡，但是当我向后移动鼠标时，过渡不起作用并且看起来不太好 - 没有悬停效果，我希望它很清楚。我也想对悬停使用 scall 效果，但我没有额外的 wrapar，因为内容是由 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;
}

Answer 1

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-out;
background-position: center;
background-size: cover;
}

Answer 2

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

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;
}

<div>
  <span>1111</span>
</div>

Answer 3

为了使过渡在悬停和离开元素时都出现，请将所述过渡应用于元素本身；例如，在问题中使用您的 css 规则，它看起来像这样：

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
    transition: all 0.7s ease-in;
}

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");
    background-position: center;
    background-size: cover;
}

我从来没有试过像这样制作背景图片的动画。由于背景图像仅在悬停时加载，因此第一次会有延迟（如果它未加载到页面的其他位置）。我建议您以正常样式加载图像，并使用 background-position 或 background-size 来“隐藏”它，即

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

div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{        
    background-size: cover;
}

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

CSS transition for a background-image on hover?

html

css

joomla

css-transitions