Сделать изображение исчезает, и другое изображение появляется на своем месте после зависания с помощью CSS

Question

Я бы хотел, чтобы # pic3 исчез, а # pic4 появился на своем месте, когда мышь нависает над # pic3.

CSS-код:

#pic3{ 
max-width: 800px; 
max-height: 500px; 
} 

#pic4{ 
max-width:800px; 
max-height: 500px; 
display:none; 
} 

#pic4:hover{ 
max-width:800px; 
max-height: 500px; 
opacity:1; 
} 

код HTML

<div class="maps1"> 
    <img id="pic3" src="chicago.png"> 
    <img id="pic4" src="chicago2.png"> 
</div> 

Answer 1

Попробуйте это:

.maps1 #pic3 {display:inline-block;} 
.maps1 #pic4 {display:none;} 
.maps1:hover #pic3 {display: none;} 
.maps1:hover #pic4 {display: inline-block;} 

Конечно, если есть что-нибудь еще в maps1 на вашем фактическом месте, это вон» Это хорошо работает.

Answer 2

Если вы хотите, чтобы они перекрывают и есть переход вы могли бы использовать что-то вроде следующего

#pic3 { 
    /* Arbitrary but needs to be the same as pic4 if the image dimensions 
     are different */ 
    width:500px; height:800px; 

    max-width: 800px; 
    max-height: 500px;   
    position:absolute; 
} 
#pic4 { 
    /* Arbitrary but needs to be the same as pic3 if the image dimensions 
     are different */ 
    width:500px; height:800px; 

    position:absolute; 
    max-width:800px; 
    max-height: 500px; 
    opacity:0; 
    -webkit-transition: opacity 1s; 
    transition: opacity 1s; 
} 
#pic3:hover ~ #pic4, #pic4:hover { 
    opacity:1; 
} 

Demo