如何在css上悬停时在图像上显示图像 [英] How to display image over image on hover with css

问题描述

我有一个图片库，包含

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

I have a gallery of images with links.

Edit: Here's the code I have to work with:

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

What I'd like to do is show a transparent image with stars on them when someone hovers over the image. So if a person hovers over the Free Victorian Purse Pattern image, they'll see an image of - let's say - five stars indicating that the pattern has received a rating of 5 out of 5 stars from me.

I've tried both of the following with no luck. The code shows the image on hover, but it shows at the bottom of the image instead of overlapping it:

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

AND

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

Any advice? I don't want to use Javascript, and I want to add as little coding to the HTML as possible cannot change the html other than adding another class or id at the beginning of it. It all has to be done through CSS. Here's how I'd like it to look. Thanks for your help!

The code that WORKS! (Thanks cimmanon!) (Changed gallerypagetabs to gallerypatterntab to isolate the class from the rest of the blog. Screenshot from Blogger - yeah Blogger likes to rewrite things like quotations)

解决方案

You can use a pseudo element for this purpose. No need for extra markup.

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

这篇关于如何在css上悬停时在图像上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！