どのようにイメージをフェードアウトし、テキストを持つ別のイメージをフェードさせるのでしょうか？

Question

私は比較的新しいコーディングで、1つのイメージが別のイメージにフェードし、そのイメージの上にテキストがあるようにしようとしています。

私はTumblrを使用しているので、PHP-5専用の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>