添加文本以淡入和淡出图像

Question

我想在淡入和淡出的图像中添加文字。我希望文本能够随关注的图像淡入淡出。任何想法如何做到这一点？提前致谢！我已经给出了以下代码：

next

Answer 1

试试这个： -

＆＃13;

＆＃13;

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

＆＃13;

<div id="cf">
  <img class="bottom" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />
  <img class="top" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

好的尝试

＆＃13;

＆＃13;

   body, html {
        text-align: center;
        font-size: 90px;
        font-family: Poiret One;
        height: 100%;
        background: -webkit-linear-gradient(315deg, #723362, #9d223c);
        background: linear-gradient(135deg, #723362, #9d223c);
        overflow: hidden;
        color: white;
    }
 
    .letter {
        position: relative;
        top: -webkit-calc(50% - 60px);
        top: calc(50% - 60px);
        text-shadow: 0px 0px 3px white;
    }
    .letter:nth-child(1) {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
    }
    .letter:nth-child(2) {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
    }
    .letter:nth-child(3) {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
    }
    .letter:nth-child(4) {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
    }
    .letter:nth-child(5) {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
    }
    .letter:nth-child(6) {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
    }
    .letter:nth-child(7) {
        -webkit-animation: fade 4s infinite 1400ms;
        animation: fade 4s infinite 1400ms;
    }
 
    @-webkit-keyframes fade {
        50% {
            opacity: 0.02;
        }
    }
 
    @keyframes fade {
        50% {
            opacity: 0.02;
        }
    }

＆＃13;

<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>

＆＃13;

＆＃13;

＆＃13;

或者

＆＃13;

＆＃13;

.fadebutton {
text-align:center;
padding:20px 20px;
background:#fff;
line-height:60px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s ;
transition: all ease 0.5s ;
border:1px solid #ff3000;
border-radius:5px;
}
 
.fadebutton:hover {
background-image:url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
color:#fff;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s ;
transition: all ease 0.5s ;
}

＆＃13;

<div class="fadebutton">HOVER YOUR MOUSE CURSOR HERE!</div>

＆＃13;

＆＃13;

＆＃13;