Comment faire planer l'image en CSS?

Je veux changer l'image de la normale à plus lumineux quand il est sur le hover, 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 pas travailler le hover? Quand ma souris est sur, elle montre la première image, pas l'image hover.

source d'informationauteur greenthunder

  1. 18

    Vous avez une a balise contenant un img tag. C'est votre état normal.
    Vous pouvez ensuite ajouter une background-image que votre état de pointage, et cela se voit dans le fond de votre a tag - derrière la img tag.

    Vous devriez probablement créer un sprite CSS et l'utilisation d'arrière-plan des positions, mais cela 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);
}

    Ce Une Liste Outre l'Article de 2004 est toujours d'actualité, et vous donnera quelques informations sur les sprites, et pourquoi c'est une bonne idée de les utiliser au lieu de deux images différentes. C'est beaucoup mieux écrit que tout ce que je pourrais vous expliquer.

  2. 7

    Simplement ce, sans supplément de div ou JavaScript nécessaire, il suffit de pure CSS (jsfiddle démo):

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

    De la configuration de l'arrière-plan de l'image à une autre image. Ce qui est bien, mais le premier plan (attribut SRC de l'IMG) encore des superpositions de 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>
  4. 2

    Il ne fonctionne pas comme cela, mettre les deux images comme images d'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;
}
  5. 1

    Salut vous devriez donner parent position relative et de l'enfant absolue et de donner de la hauteur ou la largeur de la classe absolue comme ce

    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émonstration en direct http://jsfiddle.net/t5FEX/7/

    ou ce 

    <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émonstration en direct http://jsfiddle.net/t5FEX/9/

  6. 0

    Voici quelques facile à suivre les étapes et une grande sur le vol stationnaire tutoriel de ses exemples que vous pouvez "jouer" avec et tester le live.

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

  7. 0

    Exacte de la solution à votre problème

    Vous pouvez modifier l'image sur le vol stationnaire en utilisant contenu:url("VOTRE-IMAGE-CHEMIN");

    Pour l'image hover utiliser la ligne ci-dessous dans votre css:

    img:hover

    et de changer l'image sur le vol stationnaire à l'aide de la config ci-dessous à l'intérieur img:hover:

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

    Faire sur la classe avec cette. Et faire 2 images différentes de l'autonomie de la largeur et de la hauteur. Fonctionne dans ie9.

    Voir ce lien.

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

    Vous pouvez également 2 types d'images et les placer dans l'auto nom de la classe dans le placez l'autre des images.

    Voir un exemple.

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