如何使图像悬停在另一个图像上？答案

【问题标题】：How to make an image hover over another?如何使图像悬停在另一个图像上？
【发布时间】：2016-01-12 17:06:41
【问题描述】：

我想知道当我将鼠标悬停在另一张图片上时，如何让一张图片直接出现在另一张图片上？

这是我正在处理的页面：http://sehunyifan.tumblr.com/biastest 我没有自己制作原始代码，我只是想调整它并实现一些东西。

在这些图像上，当我将鼠标悬停在它们上方时，我希望显示带有文本的透明图像，但我不知道该怎么做。

CSS：

.f1 {
    float:left;
    box-shadow: 1px 1px 2px #777;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-shadow: 1px 1px 2px #777;
    position: relative;
    width: 280px; height: 380px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
}

.hoverimg {
    float:left;
    box-shadow: 1px 1px 2px #777;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-shadow: 1px 1px 2px #777;
    position: relative;
    width: 280px; height: 380px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px; 
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out
}

.f1:hover .hoverimg 
{
    opacity: 1.0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;

HTML：

<div class="f1">
    <img src="IMGURL">
    <div class="hoverimg">
        <img src="HOVERIMGURL">
    </div>
</div>

.f1 工作得很好，但 .hoverimg 没有，我不知道该怎么做。我想复制整个 .f1 部分，因为我希望它看起来完全一样，但只在我悬停时出现，似乎没有用。

我不是代码专家，我只是想尝试一下，我不确定下一步是什么。

小提琴：https://jsfiddle.net/dodkmrof/

【问题讨论】：

请发一个 jsfiddle 而不是写完整的代码。
jsfiddle.net/dodkmrof 给你！
您在hoverimg 上的网址无效。
我不知道为什么？ ;;

标签： html css image hover

【解决方案1】：

试试这个：

.f1 {
    float:left;
    box-shadow: 1px 1px 2px #777;
    -moz-box-shadow: 1px 1px 2px #777;
    -webkit-shadow: 1px 1px 2px #777;
    position: relative;
    width: 280px; height: 380px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
}
.f1 img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hoverimg {
    z-index: 2;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.f1:hover .hoverimg {
    opacity: 1;
}

<div class="f1">
    <img src="http://placehold.it/280x380/000000/ffffff" />
    <img src="http://placehold.it/280x380/ffffff/000000" class="hoverimg" />
</div>

【讨论】：

这完美！非常感谢！

【解决方案2】：

更简单的方法呢？将要在悬停时显示的图像作为 div 的背景，将要在鼠标悬停时隐藏的图像作为内容。在鼠标悬停时，您可以指定 visibiliy: hidden;到内容，这个背景将是可见的，比如 https://jsfiddle.net/4g9m53ws/1/

.container {
    width: 300px;
    height: 300px;
    background: url('http://placehold.it/300x300');
}

.container:hover img {
     visibility: hidden;   
}

【讨论】：