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部分的想法是因为我希望它看起来完全一样，但只有在我悬停时才会出现。

我不是代码专家我只是试着玩，而且我不确定下一步是什么。

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

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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;   
}

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

2 个答案: