TUTORIAL: Slide in text box over image with jQuery

[smoovo]

Sometimes we want to add text over image, but not as static one, we want it to be visible when it mouse over. And... if possible (it is)... make it smooth in.

Here is the code and DEMO.


The HTML code in the body.

<div id="container">
    <div id="text">It's smooth...<br />It's SMooVo.</div>
</div>

The CSS code, can be placed inside the head.

#container {
    width:200px;
    height:200px;
    position:relative;
    background:url('../../images/logo.jpg') no-repeat;
}

#text {
    width:200px;
    height:70px;
    position:absolute;
    left:0;
    bottom:0;
    background:#000;
    display:none;
    /* for IE */
    filter:alpha(opacity=60);
    /* CSS3 standard */
    opacity:0.6;
    color:#fff;
}

Link to the jQuery updated file. Place this code inside your page head.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

The jQuery action

<script language="javascript">

    $(document).ready(function() {
        $("#container").hover(function(){
            $("#text").slideToggle("slow");
        });
    });

</script>

You can play with this. First you have to replace the image, and the jQuery file location. The online location for jQuery is http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. You can save it and refer to it.

- Enjoy & Rate...

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com

 

[bcee]

Lovely!

™ instead of the special char.

 

[scottl]

Thanks for this!
Question: How can I make it so the opacity doesn't apply to the text? I would like to make the overlay a blue color but don't want the text going opaque as well and looking muddy blue/brown.

 

[Phreaddee]

use rgba for your background instead of opacity.
eg background:rgba(100,100,100,0.7);
then you use the alpha channel to give the opacity without affecting all child elements.
as opacity will add opacity to the div and all subsequent children.

 

[dabar]

thanks, it really helped me.