Text ändert sich in ein Bild auf Hover

Question

Ich versuche, einen Text zu einem Bild auf Hover zu ändern, mit CSS iv'e versuchte einige Sachen bisher, aber keine half mir und ich habe versucht, es zu googeln, aber nichts sehr hilfreich.

Auch das Bild, das ich habe, ist sehr groß, es ist ein Screenshot.

Ich versuche so etwas aus dem Portfolio dieses Typen zu machen, wo er seine Projekte präsentiert.

http://pierre.io/#

das ist mein 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; 
} 

Im Grunde hat er, wenn Sie über das Logo schweben sie in einen Screenshot seines Projekts übergeht. aber ich möchte, wenn ich über mein H2 schweben, damit es in einen Screenshot übergeht.

Answer 1

wird diese Arbeit:

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