Comment superposer des images

Question

Je veux superposition d'une image à l'autre à l'aide de CSS. Un exemple de ceci est la première image (le fond si vous le souhaitez) sera une vignette lien d'un produit, avec le lien de l'ouverture d'un lightbox / affichera une version agrandie de l'image.

Sur le dessus de cette image liée, je voudrais une image d'une loupe, pour montrer aux gens que l'image peut être cliqué pour l'agrandir (apparemment ce n'est pas évident sans la loupe).

Answer 1

Je viens d'avoir fait faire cette chose exacte dans un projet. Le HTML côté ressemblait un peu à ceci:

<a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon"><img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom"></span>
</a>

Ensuite, à l'aide de CSS:

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

J'ai laissé beaucoup de l'échantillon il y a sur le CSS de sorte que vous pouvez voir comment j'ai décidé de faire le style. Remarque j'ai baissé l'opacité de sorte que vous pourriez voir à travers la loupe.

Espérons que cette aide.

EDIT: Pour clarifier, pour votre exemple - vous pouvez ignorer le visibility:hidden; et de tuer le :hover exécution si tu voulais, c'était juste la façon dont je l'ai fait.

Answer 2

Une technique proposée par le présent article, serait de faire ceci:

<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />

Answer 3

Une façon simple de le faire avec du CSS seulement, sans en modifier le contenu avec des balises supplémentaires est montré ici (avec le code et l'exemple): http://soukie.net/2009/08/20/typography-and-css/#example

Cela fonctionne, aussi longtemps que le parent de l'élément n'est pas à l'aide de positionnement statique. Tout simplement le paramètre de positionnement relatif est le tour est joué. Aussi, IE <8 ne prennent pas en charge l' :avant de sélecteur ou de contenu.

Answer 4

Vous pouvez consulter ce tutoriel: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

En lui, l'écrivain utilise un vide span élément à ajouter une superposition de l'image. Vous pouvez utiliser jQuery pour injecter dit span éléments, si vous souhaitez conserver votre code le plus propre possible. Un exemple est également donnée dans l'article mentionné ci-dessus.

Espérons que cette aide!

-Dave

Answer 5

Si vous êtes seul à vouloir le magnifing verre sur le vol stationnaire, alors vous pouvez utiliser

a:hover img { cursor: url(glass.cur); }

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

Si vous le voulez pas de façon permanente, vous devriez soit dans l'original thumnail, ou les ajouter à l'aide de JavaScript plutôt que de l'ajouter à la page HTML (c'est purement de style et ne devrait pas être dans le contenu).

Laissez-moi savoir si vous voulez de l'aide sur le JavaScript côté.