TUTORIAL: Slide in text box over image with jQuery

Discussion in 'Web Design' started by smoovo, Oct 25, 2010.

to remove all ads.
  1. smoovo

    smoovo New Member

    Messages:
    377
    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.

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

    The CSS code, can be placed inside the head.

    HTML:
    #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.

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

    The jQuery action

    HTML:
    <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
     
    Last edited: Oct 27, 2010
  2. bcee

    bcee New Member

    Messages:
    367
    Lovely!

    &trade; instead of the special char.
     
  3. scottl

    scottl New Member

    Messages:
    1
    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.
     
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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.
     
  5. dabar

    dabar New Member

    Messages:
    1
    thanks, it really helped me.
     

Share This Page