Question

我正在尝试将文字更改为悬停图片，使用CSS iv到目前为止尝试了一些东西，但没有人帮助我，我尝试使用谷歌搜索，但没有什么有用的。

我所拥有的图片非常大，它是一个截图。

我正试图从这个人的投资组合中做出类似的事情来展示他的项目。

这是我的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上时，它会转换为截图。

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>

文本在悬停时更改为图像

1 个答案: