web-dev-qa-db-fra.com

Comment faire bouger l'image en css?

Je veux changer l'image de normale à plus lumineuse lorsqu'elle est en vol stationnaire, mon code:

    <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;
}

Pourquoi ne fonctionne pas le vol stationnaire? Lorsque ma souris est dessus, il montre la première image, pas l'image de survol.

cssimagehover
10
greenthunder

Vous avez une balise a contenant une balise img. C’est votre état normal… .. Vous ajoutez ensuite un background-image comme état de survol et il apparaît à l’arrière-plan de votre balise a - derrière la balise img.

Vous devriez probablement créer un sprite CSS et utiliser des positions d’arrière-plan, mais ceci devrait vous aider à démarrer:

<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);
}

This Un article à part List de 2004 est toujours d'actualité et vous donnera quelques informations de base sur les sprites et explique pourquoi il est judicieux de les utiliser au lieu de deux images différentes. C'est beaucoup mieux écrit que tout ce que je pourrais vous expliquer.

19
djlumley

Vous définissez le fond de l'image sur une autre image. Ce qui est bien, mais l'avant-plan (attribut SRC de l'IMG) recouvre tout le reste.

.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>
7
John Green

Simplement ceci, aucun div supplémentaire ni JavaScript nécessaire, juste du CSS pur ( 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;
}
7
scrypter

Cela ne fonctionnera pas comme ça, mettez les deux images en arrière-plan:

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

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

Salut, vous devez indiquer la position relative du parent et de l'enfant, ainsi que la hauteur ou la largeur, à la classe absolue, comme ceci. 

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>
​

Démo en direct http://jsfiddle.net/t5FEX/7/

ou ca 

<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>​

Démo en direct http://jsfiddle.net/t5FEX/9/

1
Rohit Azad

Voici quelques étapes faciles à suivre et un excellent tutoriel en vol stationnaire avec les exemples avec lesquels vous pouvez "jouer" et tester en direct.

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

0
dzoni

Solution exacte à votre problème

Vous pouvez changer l'image en survol en utilisant content: url ("YOUR-IMAGE-PATH") ;

Pour le survol de l'image, utilisez la ligne ci-dessous dans votre css:

img:hover

et pour changer l'image en survol à l'aide de la configuration ci-dessous dans img: hover:

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