悬停时文本更改为图像答案

【问题标题】：Text changes to an image on hover悬停时文本更改为图像
【发布时间】：2016-06-30 01:35:08
【问题描述】：

我正在尝试将文本更改为悬停时的图像，使用 CSS iv'e 到目前为止尝试了一些东西，但没有一个对我有帮助，我尝试用谷歌搜索它，但没有什么帮助。

我的图片也很大，是截图。

我正在尝试从这个人展示他的项目的作品集中制作类似的东西。

这是我的 HTML：

<div class="jumbotron projectsJumbotron2">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h2>Discover</h2>
            </div>
        </div>
    </div>
</div>

CSS：

.projectsJumbotron2{
    background:transparent;
    padding-top: 100px;
}
.projectsJumbotron2 .container .row .col-sm-6 h2{
    font-family: lobster;
    padding-left: 100px;
    font-size: 50px;
}

基本上，当您将鼠标悬停在徽标上时，它会转换为他的项目的屏幕截图。但我希望当我将鼠标悬停在我的 H2 上时，它会转换为屏幕截图。

【问题讨论】：

请添加您的 CSS 和您编写的任何 JavaScript。
我添加的 CSS 只是为了自定义我的 h2 和它的位置。我会添加它。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
如果您只有这些，您实际上是在要求为您编写代码。话虽如此，我可以为您指明正确的方向。 codepen.io/knolaust/pen/bNvZRQ
伙计们。我写过我为它做了研究，我尝试了一些不起作用的东西，所以我删除了我的工作。并放置原始的东西，这样它就不会混淆。我再说一遍，我写道，如果您看不懂这不是我的错，我会进行研究。

标签： html css

【解决方案1】：

这将起作用：

<style type="text/css">
.pic {
   position: absolute;
   opacity: 0;
   transition: all 0.5s ease;
}
.pic:hover {opacity: 1;}
</style>
<div class="jumbotron projectsJumbotron2">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img class="pic" src="img/pic.jpg" />
                <h2>Discover</h2>
            </div>
        </div>
    </div>
</div>

【讨论】：

是的，它完全符合我的要求。我在这件事上走错了路。我尝试将 h2 放在显示块上，然后在悬停时没有显示块，这一切都很混乱，根本不起作用，我现在明白如何让它发生了，非常感谢。