comment disparaîtrait une image et fondu une autre image dans ce texte?

Question

Je suis relativement nouveau en codage et j'essaie de faire en sorte qu'une image disparaisse à une image différente et que cette image ait du texte dessus. J'utilise Tumblr, donc PHP-5-seulement MVC Je suis assez sûr. Et voici ce que j'ai jusqu'à présent:

<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

Si je l'ai correcte de ce que vous voulez, la meilleure façon de le faire est d'utiliser position: absolute; et opacity sur :hover pour y parvenir. Le positionnement placera les couches les unes sur les autres et pas les unes à côté des autres (comme dans votre exemple).

Voir mon exemple ci-dessous.

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