将图像悬停在图像前方

Question

我是html和css的新用户，正在创建我的第一个网站。我正在尝试拍摄图像并将图像悬停在图像上，除了显示为不同的颜色。我读过类似的其他帖子，但我仍然遇到困难。

这是我html的一部分：

<div id= "silhouette_3">
    <img src= "images/silhouette_kickboxing.gif" />
</div>

这是css：

#silhouette_3 img
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#silhouette_3 img:hover 
{
  background-image: url('images/silhouette_kickboxing_color.gif');
  z-index: 100;
}

我相信我的一个问题是一张图片是背景图片而另一张图片不是，但我不确定我还能尝试什么。任何帮助都会非常感激。非常感谢！

Answer 1

你没错，images/silhouette_kickboxing_color.gif是背景，<img src=".."/>不是。{1}}。

这是一个解决方案：

<div id= "silhouette_3">
    <img />
</div>

#silhouette_3 img
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-image: url('images/silhouette_kickboxing.gif');
}

#silhouette_3 img:hover 
{
  background-image: url('images/silhouette_kickboxing_color.gif');
  z-index: 100;
}

当img实际上不再是图片时，我更喜欢你应该用div重新发送它。

Answer 2

第一张图片：

第二张图片：

<强> CSS

#hovereffects:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Fiddle

您还可以查看 Fiddle

Answer 3

你是对的，问题是图像之一是background-image而另一个不是，您可以通过将彩色图像放在顶部并将默认图像放在background-image然后修复它使用opacity隐藏顶层（彩色图像），最后在鼠标悬停时显示：

HTML：

<div id= "silhouette_3">
    <img src= "images/silhouette_kickboxing_color.gif" />
</div>

CSS：

#silhouette_3{
  background-image: url('images/silhouette_kickboxing.gif');
}
#silhouette_3 img
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
  opacity: 0;
}

#silhouette_3:hover img
{
  opacity: 1;
}

Answer 4

从技术上讲，你的代码可能有效，但是当你将鼠标悬停在它上面时，背景图像就不会显示，因为背景不能显示在它的前景之上。您不能仅在背景图像上设置z-index，因为它不是一个单独的元素。

有很多方法可以实现这一目标。您可以在div上设置背景图像，然后将其他图像设置为仅在您将鼠标悬停在其上时显示。

例如：

HTML：

<div id= "silhouette_3">
    <img src= "http://lorempixel.com/400/200/sports" />
</div>

CSS：

#silhouette_3
{
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-image: url("http://lorempixel.com/400/200/abstract");
  background-repeat: no-repeat;
}

#silhouette_3 img {
  visibility: hidden;
}

#silhouette_3:hover img {
  visibility: visible;
}

这样，CSS中的背景图像是最初显示的图像，img标记中的背景图像是当您将鼠标悬停在其上时显示的图像。

我在CodePen创建了一个演示：http://codepen.io/Ghodmode/pen/foIhJ

更新：在我看来，图片更像是内容而不是展示，所以我宁愿在HTML中使用它们而不是CSS。我更新了我的CodePen演示，以稍微不同的方式做到这一点。我更喜欢这种方式...

HTML：

<div id="silhouette_4">
  <img class="img1" src="http://lorempixel.com/400/200/city">
  <img class="img2" src="http://lorempixel.com/400/200/people">
</div>

CSS：

#silhouette_4 img {
  float: right;
  margin: 8px 20px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#silhouette_4 .img2 {
  display: none;
}

#silhouette_4:hover .img1 {
  display: none;
}

#silhouette_4:hover .img2 {
  display: inline-block;
}