html - 悬停离开后CSS没有平滑淡入

Question

我试图让这个图像在悬停离开后平滑地淡入，但它似乎只是弹回，我希望过渡看起来平滑并在淡出时混合在一起，就像它在淡出时一样。

我可能对 css 太过分了，但我的主要目标是让第一个 div 成为图像，第二个 div 成为带有信息的背景。

.imageInfo {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 15px;
  color: black;
  font-style: italic !important;
  font-size: smaller;
}

.imageContainer {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  margin-bottom: 20px;
  min-width: 330px;
  height: 150px;
}

.cImage {
  max-width: 400px;
  min-height: 130px;
  width: 100%;
  height: 100%;
  padding: 5px;
  vertical-align: middle;
}

imageContainer.img {
  width: auto;
  display: inline-block;
}

.imageContainer img.play,
.imageContainer img.picture,
.imageContainer img.fade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: ease-in-out 0.6s;
}

.imageContainer img.play {
  opacity: 1;
  visibility: visible;
}

.imageContainer:hover img.play {
  opacity: 0;
  visibility: hidden;
}

.imageContainer div.picture {
  opacity: 0;
  visibility: hidden;
}

.gradient {
  background-image: linear-gradient(to top, orange, red);
}

.imageContainer div.picture .fade {
  opacity: 0;
  visibility: hidden;
}

.imageContainer:hover div.picture {
  opacity: 1;
  visibility: visible;
}

.imageContainer:hover div.picture .fade {
  opacity: 1;
  visibility: visible;
}

<span class="imageContainer">
        <img  [src]="https://www.w3schools.com/images/w3schools_green.jpg"
          class="play cImage">   
            <div class="picture cImage gradient">
              <a class="fade">Baby Yoda</a>
              <div class="imageInfo fade">
               <strong>Date:</strong><span>"01/01/1999"</span>
</div>
</div>
</span>

标签： htmlcss

Answer 1

使用src而不是[src]. 更改<img [src]="https://www.w3schools.com/images/w3schools_green.jpg" class="play cImage" />为<img src="https://www.w3schools.com/images/w3schools_green.jpg" class="play cImage" />

.imageInfo {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 15px;
  color: black;
  font-style: italic !important;
  font-size: smaller;
}

.imageContainer {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  margin-bottom: 20px;
  min-width: 330px;
  height: 150px;
}

.cImage {
  max-width: 400px;
  min-height: 130px;
  width: 100%;
  height: 100%;
  padding: 5px;
  vertical-align: middle;
}

imageContainer.img {
  width: auto;
  display: inline-block;
}

.imageContainer img.play,
.imageContainer img.picture,
.imageContainer img.fade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.imageContainer img.play {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.imageContainer:hover img.play {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.imageContainer div.picture {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.gradient {
  background-image: linear-gradient(to top, orange, red);
}

.imageContainer div.picture .fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.imageContainer:hover div.picture {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

.imageContainer:hover div.picture .fade {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s linear, visibility 0.6s linear;
}

<span class="imageContainer">
        <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="play cImage">   
            <div class="picture cImage gradient">
              <a class="fade">Baby Yoda</a>
              <div class="imageInfo fade">
               <strong>Date:</strong><span>"01/01/1999"</span>
</div>
</div>
</span>

在您的评论之后，如果我理解正确，那么您想要相同的过渡效果on mouse in和on mouse leave. 然后transition-timing-function将linear代替easy-in-out | easy-in | ease-out等。您必须阅读有关transition-timing-function 的更多信息。而且你必须分开transition-propery（opacity，visibility）。您必须阅读有关transition-property 的更多信息。

:hover您只为or编写了转换mouse in。现在你必须为mouse leave. 你CSS会是这样的。

.imageContainer img.play{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s linear, visibility 0.6s linear;
}

.imageContainer:hover img.play{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s linear, visibility 0.6s linear;
}

检查上面的代码片段它正在工作mouse in并且mouse out.