Html 在css中完成图像

我正在为我的项目制作一个symmetri网页。我使用了对半的图像，并希望它的对称对应的两个也显示在悬停。我的意思是，当我们将鼠标悬停在容器上时，图像将完成以显示完整图像。我如何做到这一点。

#容器{
高度：300px；
宽度：241px；
边框：1px纯红；
}
img{
高度：300px；
宽度：120px；
右边框：1px点灰色；
显示：内联块；
浮动：左；
}

对称性

---

您可以使用

：hover

关键字创建第二个类，并将

背景图像

属性设置为此处的完整图像

差不多

#container:hover {
  height: 300px;
  width: 241px;
  border: 1px solid red;
  background-image: url('Your Image url')
}

---

应该这样做。

您可以使用css3转换来镜像该图像，然后在用户悬停在容器上时使用：hover伪类来显示该图像：

#容器{
高度：300px；
宽度：242px；
边框：1px纯红；
}
#容器：悬停。第二{
显示：块；
}
img{
高度：300px；
宽度：120px；
右边框：1px点灰色；
显示：块；
浮动：左；
}
.第二{
变换：比例（-1,1）；
显示：无；
}

对称性

---

简单选项的副本。。。。不要半途而废。获取完整图像，并在图像的一半上方放置一个div。当你越过div隐藏它时。可能是重复的你问了一个问题只是为了评论“Je suis Charlie”？这不是做这种事情的地方，你在浪费每个人的时间。