我想在悬停时添加线性渐变过渡 .
我做了一些研究,发现它是如何工作的,但遗憾的是它们仅适用于按钮等,而我想在图像上使用它 .
我使用css属性 background-image 添加了一个图像 . 我希望当用户悬停图像时,图像显示带过渡的线性渐变 .
这是代码 .
.project-1 {
background-image: url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
width: 350px;
height: 250px;
background-position: center;
background-size: cover;
transition: transform 0.5s , opacity 0.5s;
}
.project-1:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.39) , rgba(0, 0, 0, 0.39)) , url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");
background-position: center;
background-size: cover;
transform: scale(1.05);
}
<div class="project-1"></div>
我在stackoverflow上找到的主题有按钮或简单的背景,没有任何图像 .
(我在代码中使用的图像仅用于代码片段)
1 回答
您不能使用像这样的线性渐变应用淡入淡出过渡 . 另一种方法是在应用不透明度转换的位置使用伪元素:
或者通过播放背景大小或背景位置,您可以使用渐变进行另一种过渡 . 这是一个例子: