How to make fade in on hover?

Question

I'm trying to make some text fade in over an image on hover over the div container. Just to give you a precise example here is what I'm looking for: http://outgrow.me/ .

Here is my HTML as it stands:

<div class="project-boxes">
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
            <div class="box">
                <a href="project1.html">
                    <img src="../img/project1.png">
                    <h3>Project 1</h3>
                    <p>Description</p>
                </a>
            </div>
</div>

My CSS:

/**********************
*****PROJECT BOXES*****
**********************/
.project-boxes {
    margin: 0 3%;
}

.box {
    padding: 2.5%;
    width: 20%;
    height: 120px;
    margin: 2% 3.9999999999999999999%;
    float: left;
    border: 1px solid #BABABA;
    border-radius: 5px;
}

.box h3 {
    color: #3F7250;
}

I don't have any javascript or jquery for this yet but would like to implement some in my project. Feel free to share this with me on a fiddle or something. Thanks.

Answer 1

You can use jQuery to target the hover event and fade in the description.

 $('.box a').hover(function() { $(this).find('.desc').fadeIn(500); }, function() { $(this).find('.desc').fadeOut(500); }); 

 .box { position: relative; } .box .desc { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; background: rgba(255, 255, 255, 0.5); } 

 <div class="box"> <a href="project1.html"> <img src="http://placehold.it/150x150" /> <div class="desc"> <h3>Project 1</h3> <p>Description</p> </div> </a> </div> 

jsFiddle

Answer 2

No need for JS. Use plain CSS and :hover

 /* SIMPLY ADD THIS TO YOUR CSS */

.box img ~ *{                  
  opacity:0;
  transition:0.3s;
}
.box:hover img ~ *{  
  opacity:1;
}

 .project-boxes { margin: 0 3%; } .box { padding: 2.5%; width: 20%; height: 120px; margin: 2% 3.9999999999999999999%; float: left; border: 1px solid #BABABA; border-radius: 5px; } .box h3 { color: #3F7250; } .box img ~ *{ /* ADD THIS */ opacity:0; transition:0.3s; } .box:hover img ~ *{ /* AND THIS */ opacity:1; } 

 <div class="project-boxes"> <div class="box"> <a href="project1.html"> <img src="../img/project1.png"> <h3>Project 1</h3> <p>Description</p> </a> </div> <div class="box"> <a href="project1.html"> <img src="../img/project1.png"> <h3>Project 1</h3> <p>Description</p> </a> </div> <div class="box"> <a href="project1.html"> <img src="../img/project1.png"> <h3>Project 1</h3> <p>Description</p> </a> </div> <div class="box"> <a href="project1.html"> <img src="../img/project1.png"> <h3>Project 1</h3> <p>Description</p> </a> </div> </div> 

Answer 3

Without JQuery:

<div class="box">
   <a href="project1.html">
     <div class='text'>
        <h3>Project 1</h3>
        <p>Description</p>
     </div>
     <img src="../img/project1.png">
   </a>
</div>

CSS:

.box {
    position: relative;
    ...
}

.box .text {
    position: absolute;
    z-index = 1;
}

.box img {
    position: absolute;
    z-index = 2;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.box img:hover {
    opacity: 0.2;
    transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
}

Answer 4

Doing this on javascript would be more complicated that to do it with jquery or CSS. but, still if you want javascript so badly here :

 // fade out function fadeOut(el) { el.style.opacity = 1; (function fade() { if ((el.style.opacity -= .1) < 0) { el.style.display = 'none'; el.classList.add('is-hidden'); } else { requestAnimationFrame(fade); } })(); } // fade in function fadeIn(el, display) { if (el.classList.contains('is-hidden')) { el.classList.remove('is-hidden'); } el.style.opacity = 0; el.style.display = display || "block"; (function fade() { var val = parseFloat(el.style.opacity); if (!((val += .1) > 1)) { el.style.opacity = val; requestAnimationFrame(fade); } })(); } var btn = document.querySelector('.js-btn'); var el = document.querySelector('.js-fade'); btn.addEventListener('click', function(e) { if (el.classList.contains('is-hidden')) { fadeIn(el); } else { fadeOut(el); } }); 

 .is-hidden { display: none; } .btn { background: #ccc; border-radius: 3px; display: inline-block; padding: 5px; } body { padding: 40px; } 

 <span class="js-btn btn">Click me</span> <div class='js-fade is-hidden'>You look amazing!</div>