Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Aug 2009
    Posts
    21
    Member #
    19750
    Very, very new designer here.

    I would like text to pop up over an image when you hover. I've figured out how to do this with css, but I feel like there must be a more efficient way because, as of now, I've got to make the image twice as large and have the text retouched on the image. Then the image slides over when your hover.
    Check: www.glastarza.com/new.html

    Here's the css that's making it work:
    #car {
    width: 200px;
    height: 265px;
    display: block;
    background: transparent url('fpo/imagea_2.png') no-repeat;
    border: 1px solid red;
    }

    #car:hover {
    background: transparent url('fpo/imagea_2.png') -200px 0 no-repeat;
    }

    Is there a way to do this with plain text that will just pop up over the image? Can someone point me to a tutorial that can help?

    Thanks in advance.

    -greenpoint

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    The script below works for FireFox (and IE8?) ...
    But it won't work with IE6 .. maybe there's a hack for that version?

    Anyhow, this is a place to start:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
    <
    html>
    <
    head>

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">

    <
    title></title>
    <
    style>
    body{
    margin:0 auto;
    font-family:arial;
    font-size:18px;
    color:#000;
    }
    #car {
    width200px;
    height265px;
    displayblock;
    backgroundtransparent url('fpo/imagea_2.png'no-repeat;
    border1px solid red;
    }

    #car span {
    padding:20px;
    visibility:hidden;
    }
    #car:hover span,#car:active span {
    padding:20px;
    visibility:visible;
    }
    </
    style>

    </
    head>
    <
    body>
    <
    div id="car">


    <
    span>This is the box text.</span>


    </
    div>
    </
    body>
    </
    html


  4. #3
    Junior Member
    Join Date
    Aug 2009
    Posts
    21
    Member #
    19750
    Wow. You rock! Much, much, much appreciated!
    -g




    Quote Originally Posted by mlseim
    The script below works for FireFox (and IE8?) ...
    But it won't work with IE6 .. maybe there's a hack for that version?

    Anyhow, this is a place to start:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
    <
    html>
    <
    head>

    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">

    <
    title></title>
    <
    style>
    body{
    margin:0 auto;
    font-family:arial;
    font-size:18px;
    color:#000;
    }
    #car {
    width200px;
    height265px;
    displayblock;
    backgroundtransparent url('fpo/imagea_2.png'no-repeat;
    border1px solid red;
    }

    #car span {
    padding:20px;
    visibility:hidden;
    }
    #car:hover span,#car:active span {
    padding:20px;
    visibility:visible;
    }
    </
    style>

    </
    head>
    <
    body>
    <
    div id="car">


    <
    span>This is the box text.</span>


    </
    div>
    </
    body>
    </
    html


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com