• 0

help with hoverbox


Question

im having issues making this hoverbox.

ive tried adding one property at a time to see what is making it work the way it does but i still dont see it. i tried it 1st with my own gallery i made but it just screwed it all up, then i tried making a completely different page and still it didnt work, but when i just copy and paste the code it works fine. i mean i understand what the properties in the source do i just dont understand why when i try to make it, it never works. btw i like to try and make it without looking at the code, if i just look its like im cheating and i dont learn anything from it at all. so please dont just tell me to look at the code...

heres what i want to make:

http://www.switcharoo.vacau.com/practice/test_hover.html

heres the POS i keep making:

http://www.switcharoo.vacau.com/practice/hover_test2.htm

if somebody can explain to me what im doing wrong, or why it wont work, something along those lines id gladly appreciate it. please dont say crap like "it doesnt work because it doesnt." ive been told this in other forums already and ive been seeking help for 3 days. i just want to understand how its working, what im doing wrong, and how to adjust it so i can learn something and get over this stupid project and move onto something new.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

The key piece that makes this work is changing the property of a child element when the parent in hovered up on. In this case its a gallery with images. So the image initially is sized to the size of the parent. When the parent is hovered up on the image is set to its normal size or a bigger size. Following would be the css for a list markup with images in it. The html...


<ul>
<li><img src="images/pic1.img" width="" height="" alt="" /></li>
</ul>

The css...

li {
width: 50px;
height: 50px;
position: relative;
}
li img {
top: 0;
left : 0;
width: 50px;         /* reduced width */
height: 50px;         /* reduced height */
position: absolute;
}
li:hover img {
top: 50%;
left : 50%;
width: 200px;         /* real width */
height: 200px;         /* real height */
position: absolute;
margin: -100px 0 0 -100px;
}

Link to comment
Share on other sites

  • 0

holy crap, thats the most help ive gotten all week lol.

thank u so much.

whats the margin:-100px for?

ive been using codingforums for help and nobody is helping me -.-

either that or i get stupid replies. besides here r there any other forums i can use thatll actually help?

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.