html - 你如何使用 html/css 进行图像翻转？

Question

我目前正在为我的平面设计工作建立一个网站。在我的主页上，我选择了一些图片来展示我的作品。我希望能够将鼠标悬停在图像上，以便它们具有显示元素名称及其所属类别的叠加层。我研究过您可以使用 html 执行此操作，使用以下代码 -

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
       onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
       onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
</a>

然而，当我尝试这个时，它在预览中不起作用，我已经听说这种方法会导致问题，而且很老派。

我还读到过，您可以使用 CSS 方法创建一个图像，其中包含您希望彼此相邻滚动的两个图像。

但是，如果我这样做，将很容易将文本和链接放在翻转上。例如，在滚动图像上，我将使用 HTML 和链接制作文本，但是使用 CSS 方法容易做到吗？

这是一个使用这种方法的网站-

http://www.equisgarcia.com

Answer 1

有多种方法可以解决这个问题，具体取决于您的需要。

我用其中一种方法仅使用 CSS 制作了一个 fiddle ， you can see it working here.

你只需要:

1) 定义包含图像和具有大小的文本的父元素“parentExample”。2) 定义图片“imageExample”和文字“textExample”覆盖所有父尺寸，并设置文字默认隐藏。3) 定义一个悬停"parentExample:hover"，其中隐藏图像并显示文本。

.parentExample {
    height: 400px;
    width: 400px;
}
.imageExample {
    height: 100%;
    width: 100%;
}
.textExample {
    height: 100%;
    width: 100%;
    display: none;
}

.parentExample:hover .imageExample {
    display: hidden;
}
.parentExample:hover .textExample {
    display: block;
}