vol stationnaire img sur fond image

Question

css J'ai une image définie comme un arrière-plan comme si

.about { 
    height: 351px; 
    background-image:url("../images/about.png"); 
    background-position:center; 
    background-repeat:no-repeat; 
} 

Et je suis en train de l'utilisateur: hover

.about:hover { 
    background-image:url("../images/hover.png"); 
} 

pour afficher une autre image sur le dessus . Je veux que l'image originale soit toujours là car l'image de survol est transparente.

Cette façon de remplacer l'image, est-il possible de ne pas la remplacer, mais de passer la souris sur l'image d'origine?

Answer 1

Vous avez besoin d'un masque ou d'un élément à l'intérieur de votre élément .about (ou positionné de manière absolue dessus). Le masque a l'image de survol comme arrière-plan, mais a visibility:hidden. Ensuite, lorsque l'élément .about est dans l'état stationnaire, il active le masque. .about:hover .about-mask {visibility: visible;}. Astuce Pro: en utilisant visibility:hidden au lieu de display:none permet au navigateur de charger l'image, même si ce n'est pas visible, donc vous n'aurez pas de scintillement.

http://jsfiddle.net/nDHbD/

Answer 2

Vous pouvez placer un div au-dessus de l'un, puis l'afficher sur son image: hover, de cette façon, les deux images s'afficheront. Encore mieux, vous pouvez animer une transition sur votre nouveau div pour que tout se passe bien.