Hinzufügen von Text zum Ein- und Ausblenden von Bildern

Ich möchte Text zu den Bildern hinzufügen, die ein- und ausgeblendet werden. Und ich möchte, dass der Text mit dem betreffenden Bild ein- und ausgeblendet wird. Irgendeine Idee wie kann das gemacht werden? Danke im Voraus! Ich habe den Code unten gegeben:Hinzufügen von Text zum Ein- und Ausblenden von Bildern

<html> 
<div id="fadeslide"> 
      <img src="9.jpg" class="is-showing"/> 
      <img src="10.jpg"/> 
      <img src="11.jpg"/> 
      <img src="12.jpg"/> 
      <img src="13.jpg"/> 
</div> 
</html> 



<script> 
function slideShow() { 

    var showing = $('#fadeslide .is-showing'); 

    var next = showing.next().length ? showing.next(): 

showing.parent().children(':first');  

    showing.fadeOut(1000, function() { 

     next.fadeIn(1000).addClass('is-showing'); 

    }).removeClass('is-showing'); 

setTimeout(slideShow, 5500); 

    } 

$(document).ready(function() { 

    slideShow(); 

}); 

</script> 


#fadeslide { 
    width: 960px; 
    height: 640px; 
    margin: 0px auto 0px auto; 
    overflow: hidden; 

} 

#fadeslide img { 
    display: none; 
} 

#fadeslide .is-showing { 
    display: inline; 
}

Quelle

2016-10-29 Rafique

Try this: -

#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; 
 
}

<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>

Ok versuchen es

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; 
 
     } 
 
    }

<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>

oder diese

.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 ; 
 
}

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

Quelle

2016-10-29 14:38:23

Danke für die Antwort @Razia. Aber ich möchte eigentlich einen Text auf den Bildern haben, der mit dem Bild ein- und ausblendet. Wie kann ich das machen? – Rafique

Ok ich werde es versuchen .... –

Hinzufügen von Text zum Ein- und Ausblenden von Bildern

Antwort

Verwandte Themen