1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do you make an image appear when you hover on text?

Discussion in 'CSS' started by athena_tazil, Sep 12, 2010.

  1. #1
    I'm coding a portfolio and I can't think of a way to make it so that when you hover over the title of a piece, it would appear in an empty space over to the side. Can this be done?
     
    athena_tazil, Sep 12, 2010 IP
  2. renzmar

    renzmar Peon

    Messages:
    308
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you can do this by changing its background image.
    something like this:

    a.divClassOfyourTitle:hover {
    background: url('YourImageName.jpg');
    }

    Good luck! ^____^
     
    renzmar, Sep 12, 2010 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Are you setting the image via background as suggested in the above example? Because you could just do that as suggested and postion the background to the right and make the anchor wide enough so it gives the impression you are looking for.
     
    wd_2k6, Sep 13, 2010 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can do all sorts of image revealing tricks with jQuery, but finding the right tutorial can take a while :(
     
    Cash Nebula, Sep 13, 2010 IP
  5. MotocrossJoe88

    MotocrossJoe88 Peon

    Messages:
    143
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You could do something like this:

    <div class="text">
    <p>Text Here</p>
    </div>
    
    <div class="image">
    <img src="http://www.site.com/img.png" alt="Image" />
    </div>
    HTML:
    In your CSS file just do:

    .image {
    display: none;
    }
    
    .text:hover .image {
    display: block;
    }
    Code (markup):
    I think this is correct, sorry if there's a mistake, I'm tired. :)
     
    MotocrossJoe88, Sep 14, 2010 IP
  6. zyuriy

    zyuriy Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Google image rollover css. You'll get lots of tutorials.
     
    zyuriy, Sep 17, 2010 IP
  7. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #7
    @MotocrossJoe88

    Yep, that will work.

    Btw... nice site you have ;)

    I like your graphic works.
     
    CSM, Sep 18, 2010 IP
  8. MotocrossJoe88

    MotocrossJoe88 Peon

    Messages:
    143
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hehe Thanks :)
     
    MotocrossJoe88, Sep 18, 2010 IP