Munkiuke Munkiuke - 5 months ago 6
HTML Question

Text changes to an image on hover

I am trying to change a text to an image on hover, using CSS iv'e tried some stuff so far but none helped me and i tried googling it but nothing very helpful.

Also the picture that i have is very big it's a screenshot.

I am trying to make something like this from this guy's portfolio where he showcases his projects.

http://pierre.io/#

this is my 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;
}


Basically he has when you hover over the logo it transitions into a screenshot of his project. but i want when i hover over my H2 for it to transition into a screenshot.

Answer

This will work:

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