Answers:
我刚刚在一个项目中完成了这件事。HTML端看起来像这样：
<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>然后使用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;
}我在CSS上留下了很多示例，因此您可以看到我是如何决定样式的。注意我降低了不透明度，因此您可以通过放大镜看到。
希望这可以帮助。
编辑：为了澄清您的示例-您可以忽略visibility:hidden;并取消:hover执行，如果这是我的方法。
此处显示了一种仅使用CSS而不用其他标签修改内容的简单方法（带有代码和示例）：http : //soukie.net/2009/08/20/typography-and-css/#example
只要父元素未使用静态定位，此方法就起作用。只需将其设置为相对位置即可。同样，IE <8不支持：before选择器或content。
这是我最近的做法。从语义上讲并不完美，但是可以完成工作。
<div class="container" style="position: relative">
<img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
<div style="z-index: 100; left: 72px; position: absolute; top: 39px">
<img alt="top image" src="images/top-image.jpg"></div></div>您可能需要查看本教程：http : //www.webdesignerwall.com/tutorials/css-decorative-gallery/
在其中，编写器使用一个空的span元素添加一个覆盖图像。如果您想保持代码尽可能整洁，则可以使用jQuery注入所说的span元素。在上述文章中也给出了一个示例。
希望这可以帮助！
-戴夫
如果您只想将鼠标悬停在放大镜上，则可以使用
a:hover img { cursor: url(glass.cur); }http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
如果您希望永久保留它，则应该将其包含在原始缩略图中，或者使用JavaScript添加它而不是将其添加到HTML（这纯粹是样式，不应包含在内容中）。
让我知道您是否需要JavaScript方面的帮助。
在CSS3中，您可以执行以下操作：
.double-image {
background-image: url(images/img1.png), url(images/img2.png);
}我们要的是父母高于孩子。这就是你的做法。
您img输入span，z-index & position为两个元素都设置了，display为span 设置了额外的元素。将悬停添加到span以便您可以对其进行测试！
HTML：
<span><img src="/images/"></span>的CSS
span img {
position:relative;
z-index:-1;
}
span {
position:relative;
z-index:initial;
display:inline-block;
}
span:hover {
background-color:#000;
}除非您使用<img>本身显示图像的标签，否则仅靠纯CSS就无法实现此目的。您还将同样需要两个HTML元素-每个图片一个。这是因为，使元素通过CSS显示图片的唯一方法是使用background-image属性，并且每个元素只能有一个背景图像。选择哪个元素以及如何定位它们取决于您自己。有很多方法可以将一个HTML元素放置在另一个HTML元素之上。
这是一种在图像链接上显示以半透明背景为中心的重叠图像的好方法：
<div class="image-container">
<a class="link" href="#" >
<img class="image" src="/img/thumbnail.png"/>
<span class="overlay-image"><img src="/img/overlay.png"></span>
</a>
</div>div.image-container{
position: relative;
}
a.link{
text-decoration: none;
position: relative;
display: block;
}
a.link span.overlay-image{
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(0,0,0,0.2); /* black background with 20% alpha */
}
a.link span.overlay-image:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
a.link:hover span.overlay-image img{
display: inline-block;
vertical-align: middle;
}
a.link:hover span.overlay-image{
visibility: visible;
}这是具有半透明背景的JQuery技术。
的HTML
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
<li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
<li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
<li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
<li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
<li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
<li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
<li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
<li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
<li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
<li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>的CSS
/** Start Coding Here **/
#overlay {
background:rgba(0,0,0,0.7);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:none;
text-align:center;
}
#overlay img {
margin-top: 10%;
}
#overlay p {
color:white;
}app.js
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
// 1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
// 1.1 Show the overlay.
$overlay.show();
// 1.2 Update overlay with the image linked in the link
$image.attr("src", imageLocation);
// 1.3 Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
// 2. Add overlay
$("body").append($overlay);
// 2.1 An image to overlay
$overlay.append($image);
// 2.2 A caption to overlay
$overlay.append($caption);
});
//When overlay is clicked
$overlay.click(function(){
//Hide the overlay
$overlay.hide();
});