Question

当我将鼠标悬停在其上时，我试图让我的图像改变颜色，我设法让这个工作。但是，过渡不起作用。

我申请了“过渡：1s轻松”;对于与此图片相关的所有CSS元素，但是我无法进行过渡工作，颜色只是立即改变而不是顺利。

你能帮助并建议我做错了什么并提供解决方案吗？

提前多多感谢。

.img_effect2 {
transition: 1s ease;
position: relative;
}

.overlay {
  position: relative;
  transition: 1s ease;
}

.overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: none;
  z-index:0;
  transition: 1s ease;
}

.overlay:hover:before{
  display: block;
  transition: 1s ease;
}

.red:before {
  background-color: rgba(255,0,0,0.5);
  transition: 1s ease;
}

.featured_image {
overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    width: 500px;
    cursor: pointer;
    transition: 1s ease;
}

.featured_image:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.15);
  transition: 1s ease;
}

.featured_title{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto;
  margin-top: 100px;
  position: relative;
  z-index: 1;
  font-size: 5rem;
  color: #fff;
  text-align: center;
  width: 70%;
background-color: rgba(0, 0, 0, 0.35)
}

<div class="featured_image img_effect2 overlay red" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg">
  <p class="featured_title">Title
    </p>
   </div>

过渡：1s轻松;不使用背景颜色更改

0 个答案: