Cómo hacer que la imagen se desplace en css?

Question

Quiero cambiar la imagen de normal a más brillante cuando está en vuelo estacionario, Mi código:

<div class="nkhome"> 
     <a href="Home.html"><img src="Images/btnhome.png" /></a> 
    </div> 
.nkhome{ 
    margin-left:260px; 
    top:170px; 
    position:absolute; 
    width:59px; 
    height:59px; 
} 
.nkhome a img:hover { 
    background:url(Images/btnhomeh.png); 
    position:absolute; 
    top:0px; 
} 

¿Por qué no trabaja el vuelo estacionario? Cuando mi mouse está en él, muestra la primera imagen, no la imagen estacionario.

Answer 1

Tienes una etiqueta a que contiene una etiqueta img. Ese es tu estado normal. Agregue un background-image como estado de desplazamiento y aparece en el fondo de su etiqueta a, detrás de la etiqueta img.

lo mejor es crear un sprite CSS y el uso de posiciones de fondo, pero esto debe empezar:

<div> 
    <a href="home.html"></a> 
</div> 

div a { 
    width: 59px; 
    height: 59px; 
    display: block; 
    background-image: url('images/btnhome.png'); 
} 

div a:hover { 
    background-image: url('images/btnhomeh.png); 
} 

Este A List Apart Article from 2004 sigue siendo relevante, y le dará algunos antecedentes acerca de los sprites, y por qué es un buen idea de usarlos en lugar de dos imágenes diferentes. Está mucho mejor escrito que cualquier cosa que pueda explicarte.

Answer 2

Hola usted debe dar la posición de los padres relativa y infantil absoluta y darle a la altura o anchura a la clase absoluta como esto

Css

.nkhome{ 
    margin-left:260px; 
    width:59px; 
    height:59px; 
    margin-top:170px; 
    position:relative; 
    z-index:0; 
} 
.nkhome a:hover img{ 
    opacity:0.0; 
} 
.nkhome a:hover{ 
    background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'); 
    width:100px; 
    height:100px; 
    position:absolute; 
    top:0; 
    z-index:1; 

} 

HTML

<div class="nkhome"> 
     <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a> 
    </div> 
​ 

Demostración en vivo http://jsfiddle.net/t5FEX/7/

---

o esta

<div class="nkhome"> 
     <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
      onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'" 
      /></a> 
    </div>​ 

Demostración en directo http://jsfiddle.net/t5FEX/9/

Answer 3

No va a funcionar de esta manera, poner las dos imágenes como imágenes de fondo:

.bg-img { 
    background:url(images/yourImg.jpg) no-repeat 0 0; 
} 

.bg-img:hover { 
    background:url(images/yourImg-1.jpg) no-repeat 0 0; 
} 

Answer 4

Está configurando el fondo de la imagen en otra imagen. Lo cual está bien, pero el primer plano (atributo SRC del IMG) aún se superpone a todo lo demás.

.nkhome{ 
    margin-left:260px; 
    top:170px; 
    position:absolute; 
} 
.nkhome a { 
    background:url(Images/btnhome.png); 
    display:block; /* Necessary, since A is not a block element */ 
    width:59px; 
    height:59px; 
} 
.nkhome a:hover { 
    background:url(Images/btnhomeh.png); 
} 


<div class="nkhome"> 
    <a href="Home.html"></a> 
</div> 

Answer 5

Simplemente esto, sin div adicional o JavaScript necesario, sólo CSS puro (jsfiddle demo):

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover"> 
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!"> 
</a> 

CSS

.changesImgOnHover { 
    display: inline-block; /* or just block */ 
    width: 50px; 
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat; 
} 
.changesImgOnHover:hover img { 
    visibility: hidden; 
} 

Answer 6

Aquí están algo fácil para seguir los pasos y un gran tutorial sobre vuelo estacionario son ejemplos con los que puedes "jugar" y probar en vivo.

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

Answer 7

realice en clase con esto. Y crea 2 imágenes diferentes con el ancho y la altura propios. Funciona en ie9.

Ver este enlace.

http://kyleschaeffer.com/development/pure-css-image-hover/

También se puede hacer 2 diferentes imágenes y el lugar en el nombre de la clase de uno mismo con el vuelo estacionario en las otras imágenes.

Ver ejemplo.

.myButtonLink { 
       margin-top: -5px; 

    display: block; 
    width: 45px; 
    height: 39px; 
    background: url('images/home1.png') bottom; 
    text-indent: -99999px; 
       margin-left:-17px; 

       margin-right:-17px; 

       margin-bottom: -5px; 

       border-radius: 3px; 
       -webkit-border-radius: 3px;   
} 

.myButtonLink:hover { 
    margin-top: -5px; 

    display: block; 
    width: 45px; 
    height: 39px; 
       background: url('images/home2.png') bottom; 
       text-indent: -99999px; 
       margin-left:-17px; 

       margin-right:-17px; 

       margin-bottom: -20x; 

       border-radius: 3px; 
       -webkit-border-radius: 3px; 
} 

Answer 8

solución exacta a su problema

Puede cambiar la imagen en vuelo estacionario utilizando contenido: url ("SU-IMAGEN-PATH");

de uso Imagen vuelo estacionario debajo de la línea en el CSS:

img:hover 

y para cambiar la imagen en vuelo estacionario usando la configuración más adelante en el interior img: hover:

img:hover{ 
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg"); 
}