Html 使用css更改不透明度并在悬停时添加缩略图

我想更改img的不透明度，并添加一个50x50的缩略图，以便仅使用CSS无jquery进行悬停缩放。这就是我到目前为止所做的

HTML代码：

<div class="span4"> 
    <a class="zoom-icon" href="#">
        <img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">
    </a>
</div>

.span4 { margin: 35px 50px; border: 5px solid #000; }
.span4:hover { border: 5px solid #ccc; }
.span4 a:hover { background: #000; }
.blackout:hover { opacity: .0; }

我有悬停工作的黑色背景，但我不知道如何使缩略图显示在黑色背景“黑色”之上。任何有用的提示都将不胜感激

使用小提琴更新：

<div class="span4"> 
    <a class="zoom-icon" href="#">
        <img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">
    </a>
</div>

.span4 { margin: 35px 50px; border: 5px solid #000; }
.span4:hover { border: 5px solid #ccc; }
.span4 a:hover { background: #000; }
.blackout:hover { opacity: .0; }

类似这样的东西

HTML

---

当您将鼠标悬停在链接上时，可以使用

：after

伪元素添加缩略图。我创建了一支钢笔，展示了这一点：

这不是一个理想的解决方案，但它完全是CSS。如果我可以从图像中获取src属性的值，并使用

attr（）

（）CSS函数将其用作背景url，那就更好了，但我无法让它工作

.span4 a.zoom-icon {
    position: relative;
}

.span4 a.zoom-icon:hover:after {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 10px;
    background-color: black;
    background-image: url("http://bit.ly/XioiVs");
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
       -moz-background-size: contain;
         -o-background-size: contain;
            background-size: contain;
}

---

缩略图在哪里？通常它可以是任何缩略图。我有一个放大镜50x50连接到链接。我使用的类是缩放图标，但我认为我做得不对，因为每次我尝试它都会忘记黑色背景。我现在迷路了。缩放图标在哪里？“附加到链接”是什么意思？你的代码显然没有显示这一点。我知道，因为我删除了它。我唯一需要帮助的是添加缩略图。我想如果我不把它显示出来，我已经完成了什么，它会更有帮助。有没有一种方法可以用我目前的设置来完成它，而不添加另一个img？我问的原因是我正在使用wordpress，所以我需要编辑更多内容。好吧，如果只有css，你可以在img标签上尝试负z-index和缩放图标作为锚的背景，但我不知道，你需要测试它。我会测试你的解决方案，然后给你回复。把它放在小提琴里，这样每个人都可以试一下。我做了这个，你想让图标的东西显示在悬停的大图像上吗？还是像这样？