平滑过渡从一个内容图像到另一个内容图像

Question

＆＃13;

＆＃13;

.tidings {
    width: 30%;
    float: left;
    margin: 0 3%;
  }

  .tidingsimg:before{
      content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
      position: relative;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:after{
      content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
      position:absolute;
      top: 0;margin-top: 10px;
      opacity:0;

      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:hover:after{
      opacity:1;
  }
  .tidingsimg:hover:before{
      opacity:0;
  }

＆＃13;

<div class="tidings"><a href="http://hvalla.deviantart.com" class="tidingsimg"></a></div>

＆＃13;

＆＃13;

＆＃13;

我有一张图片，我试图使用content: url平滑过渡到另一张图片。它可以突然改变图像，但我无法弄清楚如何应用转换实际上使其从一个图像平滑过渡到另一个图像。是否可以使用内容执行此操作？

Here is a JSFiddle showing what I have going on.

Answer 1

你应该在之前使用并设置不透明度和过渡

在.tidingsimg中：课后我们添加position：absolute和top：0; margin-top：10px;因为没有它后风格将远远低于风格

.tidings {
    width: 30%;
    float: left;
    margin: 0 3%;
  }

  .tidingsimg:before{
      content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
      position: relative;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:after{
      content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
      position:absolute;
      top: 0;margin-top: 10px;
      opacity:0;

      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:hover:after{
      opacity:1;
  }
  .tidingsimg:hover:before{
      opacity:0;
  }

<div class="tidings"><a href="http://hvalla.deviantart.com" class="tidingsimg"></a></div>