Html 替代鼠标悬停时的较大图像

我正在尝试实现类似的东西

但它只希望放大的替换在鼠标停留在原始照片的某一部分时生效。有人知道我该怎么做吗

.effectback{
显示：块；
背景：url（'https://farm8.staticflickr.com/7042/6873010155_d4160a32a2_s.jpg")不重复;；
保证金：0自动；
}
.正面{
不透明度：0；
边界：无；
保证金：0自动；
}
.effectfront:悬停{
不透明度：1；
过渡：均为0.3秒；
-webkit转换：所有0.3；
}

---

使用背景图像，然后您可以创建一个不可见元素，当鼠标悬停在该元素上时，您可以切换另一个元素的背景图像

.social > .hidden > .fb {
    background: url(//cdn6.bigcommerce.com/s-ra1ho85/templates/__custom/images/fb1.png?t=1460125436);
    display: inline-block;
    background-size: 35px 35px;
}

.social > .hidden:hover > .fb {
    background: url(//cdn6.bigcommerce.com/s-ra1ho85/templates/__custom/images/fb2.png?t=1460125436);
    display: inline-block;
    background-size: 35px 35px;
}
.social{
  position:relative;
}
.hidden{
  position:absolute;
  top:0px;
  left:0px;
  height:10px;
  width:10px;
  background:transparent;
}

HTML

现在，当您将鼠标悬停在social div的左上角时，.hidden元素将被触发为：hover，并更改.fb元素的背景图像

---

希望这能有所帮助。

阅读有关精灵的文章，我的朋友：但我需要什么样的加价呢。无效。您需要添加隐藏元素。查看我的HTML编辑。不确定我可能缺少什么。我试过了，什么也没有出现。以下是我的JSFIDLE：

<div class="social">
    <div class="hidden">
        <div class="fb"></div>
    </div>
</div>