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

Question

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

这是我正在处理的页面：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 部分，因为我希望它看起来完全一样，但只在我悬停时出现，这似乎不起作用。

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

Fiddle: https://jsfiddle.net/dodkmrof/

Answer 1

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

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

.container:hover img {
     visibility: hidden;   
}

Answer 2

试试这个：

.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>

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

How to make an image hover over another?

html

css

image

hover