ホバーの画像へのテキストの変更

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

基本的に彼が持っています。しかし、スクリーンショットに移行するために私の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>