ホバー上の1つのイメージ（透明ではない）

Question

私はする必要があります。 私はこのコードを使用：

<div id="cf"> 
    <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" /> 
    <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" /> 
</div> 


#cf { 
    position:relative; 
    height:200px; 
    width:118px; 
    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; 
} 

私はトップの画像が透明であるので、私は、ホバー画像（下）を見ることができ、問題を抱えています。 http://css3.bradshawenterprises.com/cfimg/

Answer 1

はあなたがそうのよう#cfする:hover状態を移動することができ：

#cf { 
 
    position:relative; 
 
    height:200px; 
 
    width:118px; 
 
    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.bottom { 
 
    opacity: 0; 
 
} 
 

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

 
#cf:hover img.bottom{ 
 
    opacity: 1; 
 
}

<div id="cf"> 
 
    <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" /> 
 
    <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" /> 
 
</div>

私は唯一の私は、コードの

ソースにそれを置くと見られたことホバー画像（下）が必要です

Answer 2

画像上ではなく、親（#cf：ホバー）でホバーセレクタを使用します。

#cf { 
 
    position:relative; 
 
    height:200px; 
 
    width:118px; 
 
    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{ 
 
    width: 200px; 
 
} 
 

 
#cf img.bottom{ 
 
    opacity: 0; 
 
} 
 

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

 
#cf:hover img.bottom { 
 
    opacity:1; 
 
}

<div id="cf"> 
 
    <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" /> 
 
    <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" /> 
 
</div>