我正在处理一张带有渐变的图片,希望在鼠标悬停时消失。但是,我无法使其过渡效果生效。我已经尝试了我所知道的所有webkit过渡效果,但似乎都不起作用。
以下是HTML代码:
使用这个CSS:
图片和悬停效果非常好,但是没有过渡效果。您如何使过渡效果与此起作用?
网址:http://calvarygigharbor.com/css-testing/
以下是HTML代码:
<a href="http://calvarygigharbor.com/heavenly-hitters/">
<div class="tinted-image"> </div></a>
使用这个CSS:
.tinted-image {
-webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;
background:
linear-gradient(
rgba(255, 0, 0, 0.6),
rgba(237,240,0,0.6)
),
/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}
.tinted-image:hover {
-webkit-transition: all .7s ease;
transition: all .7s ease;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: 10px;
background:
/* image */
url(http://calvarygigharbor.com/wp-content/uploads/2018/05/church-softball-2018.jpg);
background-size: contain;
}
图片和悬停效果非常好,但是没有过渡效果。您如何使过渡效果与此起作用?
网址:http://calvarygigharbor.com/css-testing/
background-color: transparent;
另外,你不需要复制你原来的.tinted-image
类中的样式,因为它们已经被继承到了hover类中。我希望这样能让事情更清楚。如果没有,请告诉我,我可以用另一种方式来解释。 - MForMarlon