Rectangle 27 0

html DisplayHide a div on JavaScript hover?


#content-mid .col-2 .features .feature-1{
    border: 1px solid #E5E5E5;
    float: left;
    height: 160px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    width: 220px;
    z-index:-1;
}
#content-mid .col-2 .features .image_holder_home_page{
    height: 160px;
    overflow: hidden;
    position: relative;
    width: 220px;
}

#content-mid .col-2 .features .feature-1 .header{
    background: none repeat scroll 0 0 #0098FF;
    height: 30px;
    position: absolute;
    width: 95.5%;
}

Please add above css code into your site. because some dive elements are overflowing. this will fix that issue.

Note
Rectangle 27 0

html DisplayHide a div on JavaScript hover?


#blah {
    width:100px;
    height:100px;
    background-color:green;
    visibility: visible;
    opacity:0;
    filter:alpha(opacity=0);
}
$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});
<div style="background-color:red;">
<div id="blah">DEMO TEXT ON MOUSE OVER</div>
</div>

@tokyodrift I have define width:100px; height:100px; if you dont give it it will take automatically applied for full div :) enjoy

The div containing the text has a width and heigh defined, so the texts black bg is always filling the full width (220px) and a height (50px). Therefore I can't not define it.

While other answers will probably work if I can implement them correctly (my fault). I've been able to get this one working fine, thanks Ashuthinks. One quick question though too, right now you have to hover specifically over the 30px high div that contains the text, could it be linked to the entire image so you can hover over anywhere on the image and it will show the text? The image is in a seperate div.

Note
Rectangle 27 0

html DisplayHide a div on JavaScript hover?


<div class="features">

    <a href="Podcasts/">
        <div class="feature feature-1">
            <div class="header"><p>Podcasts</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/city" />
            </div>
            <div class="desc"><p>Podcast Simple Page</p></div>
        </div>
    </a>

    <a href="Shopping/">
        <div class="feature feature-2">
            <div class="header"><p>Shopping</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/food" />
            </div>
            <div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only 19.95 </p></div>
        </div>
    </a>

    <a href="Confessions/">
        <div class="feature feature-3">
            <div class="header"><p>Confessions</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/sports" />
            </div>
            <div class="desc"><p>tttttttttttttttt</p></div>
        </div>
    </a>

</div>

@sebcap26 I've updated my answer and added a JSFiddle demo using no JavaScript, and cleaned up the CSS a bit, you should have a look.

Given this a try so I won't have to use the JavaScript too but does not appear to be working. Does not show the div again on hover. Currently got this attempt live on the site.

Try with replacing the last lines with ".feature-1:hover .desc" instead of ".feature-1 .desc:hover".

You're CSS is wrong. Please use this tool http://csslisible.com/en/ to get it readable by an human, and you'll see what I mean by "wrong":

Note