Comment faire pour afficher l'image sur l'image sur le vol stationnaire avec css

J'ai une galerie d'images avec liens.

Edit: Voici le code que j'ai à travailler avec:

<div class="gallerypagetabs"><a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern</a><a href="http://costumingdiary.blogspot.com/2012/12/natural-form-victorian-overskirt.html"><img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt</a><a href="http://costumingdiary.blogspot.com/2012/11/truly-victorian-tv221-1878-tie-back.html"><img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review</a><a href="http://costumingdiary.blogspot.com/2012/10/truly-victorian-tv121-petticoat-pattern.html"><img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review</a>..ad naseum..</div>

CSS:

.gallerypagetabs a,.gallerypagetabs p{
    float:left;
    font-size:.80em;
    height:250px;
    padding:10px;
    text-align: center;
    width:200px
}

Ce que je voudrais faire, c'est montrer une image transparente avec des étoiles sur eux quand quelqu'un passe sur l'image. Ainsi, si une personne passe sur la Libre Victorienne Sac à main image de Motif, ils vont voir une image de - disons - cinq étoiles, indiquant que le modèle a reçu une note de 5 sur 5 étoiles de moi.

J'ai essayé les deux suivantes avec pas de chance. Le code affiche l'image sur le vol stationnaire, mais il affiche au bas de l'image au lieu de le dépasser:

.gallerypagetabs a:hover{
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit
 }

ET

.gallerypagetabs a:hover{
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit;
    z-index:10
}

Des conseils? Je ne veux pas l'utilisation de Javascript, et j' souhaitez ajouter en tant que peu de codage HTML que possible ne peut pas modifier le code html autre que l'ajout d'une autre classe ou un id au début de l'année. Tout doit être fait par le biais de CSS. Voici comment j'aimerais qu'il regarde. Merci pour votre aide!

Comment faire pour afficher l'image sur l'image sur le vol stationnaire avec css

Le code qui FONCTIONNE! (Merci cimmanon!)
(Modifié gallerypagetabs à gallerypatterntab pour isoler la classe à partir du reste du blog. Capture d'écran de Blogueur - ouais Blogueur aime réécrire des choses comme des citations)
Comment faire pour afficher l'image sur l'image sur le vol stationnaire avec css

Je pense que le problème est votre lien est en fait derrière l'image, de sorte qu'il pourrait être l'application de l'effet hover, mais vous ne le voyez pas parce que votre <img> est en face.

OriginalL'auteur costumingdiary | 2013-08-21

  1. 8

    Vous pouvez utiliser un pseudo-élément à cet effet. Pas besoin d'un surplus de balisage.

    http://cssdeck.com/labs/anxnrkhr

    <a href="#"><img src="http://placekitten.com/100/100" /></a>

a {
  position: relative;
  display: inline-block;
}

a:hover:before {
  content: '';
  display: block;
  background: rgba(255, 0, 0, .5); /* your background */
  width: 20px; /* image width */
  height: 100px; /* image height */
  position: absolute;
  top: 0;
  right: 0;
}
    Je ne comprends pas. Est le remplacement de la liaison? Je ne veux pas le faire.
    C'est juste l'exemple de balisage pour montrer que votre balisage existant fonctionne très bien (même si vous souhaitez ajouter une classe quelque part).
    IL FONCTIONNE! MERCI BEAUCOUP! .gallerypagetabs a { position: relative; display: inline-block; } .gallerypagetabs a:hover:before { content: "; display: block; background-image:url('i.imgur.com/IKAXZKz.png'); /* votre arrière-plan / width: 200px; / la largeur de l'image / height: 200px; / hauteur de l'image */ position: absolute; top: 0; right: 0; }
    Pour la postérité, j'ai eu à isoler la classe du reste du blog, j'ai donc changé la classe de gallerypatterntab pour cette page uniquement.
    Vous ne voulez pas commenter la largeur/hauteur propriétés: cssdeck.com/labs/84cu2cvw.

    OriginalL'auteur cimmanon

  2. 0

    Ce n'est pas testée, mais je pense que vous voulez quelque chose comme:

    .gallerypagetabs a, .gallerypagetabs img{
     position:absolute;
     z-index:1;
 }

 .gallerypagetabs a:hover{
     z-index:2;
 }

 .gallerypagetabs{
     position:relative;
 }

    Ce n'est pas testé, mais j'espère que vous donne une idée sur comment réaliser l'effet que vous êtes après.

    Comment est-il lié à montrer les étoiles?
    Désolé, j'ai oublié d'ajouter le z-index. Ci-dessus, vos liens avec les stars, sur le vol stationnaire, ont un z-index supérieur de la <img> et doit être placé plus haut sur la visibilité de la pile.
    Pourquoi le downvote? Cela permettra de montrer les étoiles dans le lien sur le vol stationnaire. S'il vous plaît laissez-moi savoir comment j'ai mal compris.
    L'image est à l'intérieur de l'ancre.
    Essayé d'ajouter le au-dessus de z-index, mais il ne fonctionne pas. Il a juste écrasé tout ensemble. En fait, c'était la première chose que j'ai pensé après que vous m'avez dit, le lien a derrière l'image. Permettez-moi d'essayer le code suivant...

    OriginalL'auteur Mister Epic

  3. 0

    Mettre l'image sur le de l'ancre de fond n'est pas d'aller travailler parce que l'image de la cacher.

    Vous pouvez ajouter un élément contenant les étoiles dans un position absolue à l'intérieur de la d'ancrage:

    <a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
    <img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
    <br>
    Free Victorian Purse Pattern
    <i class="stars"></i>
</a>

    Et un CSS similaire à ceci (tous les nombres peuvent varier):

    a { 
    position: relative;
}

.stars {
    background-image:url('http://i.imgur.com/IKAXZKz.png');
    background-position:inherit;
    width: 20px;
    height: 80px;
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

a:hover .stars {
    display: block;
}

    P. S - <br /> est censé être à fermeture automatique. Et il vaut mieux ne pas l'utiliser seulement pour faire une nouvelle ligne après l'image, mais peut-être donner l'image de ce style:

    a img { 
   display: block;
}
    Ne fonctionne pas non plus. En fait, quelque chose comme cela ne fonctionne pas pour moi en tout cas, parce que j'utilise Blogger étiquette de pages à créer mon code html de ma page statique. En d'autres termes, je clique sur cette page: costumingdiary.blogspot.com/search/label/... puis copier/coller dans la page statique: costumingdiary.blogspot.com/p/costume-pattern-reviews.html Il est facile pour moi de mettre à jour la page statique, parce que Google refuse de ramper Blogueur étiquette pages. La page de l'étiquette est criblé dans le javascript (que je n'ai pas écrit), ce qui crée la page.
    Le <br /> est créé par le Blogueur ou le javascript. J'aimerais obtenir débarrasser de lui aussi si je le pouvais. Le blogueur AIME ajouter <br /> partout. 🙁

    OriginalL'auteur Itay