html - 悬停时文本更改为图像

Question

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

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

我正在尝试从这个人的作品集中制作类似的东西，他展示了他的元素。

http://pierre.io/#

这是我的 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;
}

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

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