How

Discussion in 'HTML & Website Design' started by sus844, Jul 25, 2011.

0
  1. #1
    http://www.minionlinemuseum.com/index.html

    at the bottom of this site, there are 3 images, and when you hover your mouse over it, the image moves to the top... i don't know how to explain it clearly.

    I'm just wondering how they did this. what it is called and stuff...

    thanks.
     
    sus844, Jul 25, 2011 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    I know how.
     
    drhowarddrfine, Jul 25, 2011 IP
  3. drewtoby

    drewtoby Well-Known Member

    Messages:
    763
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Javascript. You can right click and hit view source to see their code.
     
    drewtoby, Jul 25, 2011 IP
  4. sus844

    sus844 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I did that, but is still confused....
     
    sus844, Jul 25, 2011 IP
  5. nienn

    nienn Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The <img> element is positioned though CSS with absolute position and nested inside an <a> element with CSS atributes display:block; width:yy px; height:yy px; overflow:hidden (so you wont be able to see the part of the image that goes out of the <a> height) and position:relative (so the <img> absolute position will work relatively to the <a>).

    Javascript then does the work. When you mouse hover the <img> style attribute "top" is changed to -50px...
     
    nienn, Jul 26, 2011 IP