如何将图像淡出并淡化另一个有文字的图像？

Question

我在编码方面相对较新，我正在努力使一张图片逐渐变成另一张图片，并且该图片上面有文字。

我正在使用 Tumblr，所以我很确定 PHP-5-only MVC。这是我目前所拥有的：

<style>
  #imagefade {
    background-image: url('http://i65.tinypic.com/107kqbq.jpg');
    position: absolute;
  }
  #imagefade img {
    -webkit-transition: all ease 1.5s;
    -moz-transition: all ease 1.5s;
    -o-transition: all ease 1.5s;
    -ms-transition: all ease 1.5s;
    transition: all ease 1.5s;
  }
  #imagefade img:hover {
    opacity: 0;
  }
  #text {
    position: center;
  }
  .image {
    position: relative;
  }
  p {
    position: absolute;
    top: 200px;
    left: 38px;
    width: 100%;
    font-family: arial;
    font-size: 12px;
    color: white;
  }
</style>

<div id="imagefade">
  <img src="http://i68.tinypic.com/2i9s4eb.jpg" />
  <p>text heading here</p>
</div>

Answer 1

如果我根据您的要求得到正确答案，最简单的方法是在 :hover 上使用 position: absolute; 和 opacity 来实现。定位会将图层设置在彼此之上而不是彼此相邻（如您的示例所示）。

请参阅下面的示例。

.container {
  background: lightblue;
  position: relative;
  width: 500px;
  height: 300px;
}

.box {
  background-image: url('https://i.imgur.com/AzeiaRY.jpg');
  background-position: center;
  position: absolute;  /* Setting the boxes on top of each other */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  transition: opacity .4s ease-in-out;   /* Transition the opacity for the :hover */
}

.image-2 {
  background-position: bottom right;
  opacity: 0;
}

.image-1:hover .image-2 {
  opacity: 1;
}


/* Pure for styling below */

.box-text {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: rgba(0, 0, 0, .8);
  width: 40%;
  height: 100%;
  box-sizing: border-box;
}

<div class="container">

  <div class="box image-1">

    <div class="box image-2">

      <div class="box-text">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsa maxime modi velit similique maiores, porro voluptate? Molestias ratione natus consequatur libero eaque
          pariatur optio quisquam minima. Nemo quis, odit.
        </p>

      </div>

    </div>

  </div>
</div>

如何将图像淡出并淡化另一个有文字的图像？

how would fade an image out and fade another image in that has text?

css

fadeout

tumblr

fadein