CSS Hover question

[pmcd9]

I have a problem with a CSS hover effect I have created.

The hover effect works perfectly, here is the HTML code

<div align="center"><a class="thumbnail" href="http://www.yahoo.com" target="_blank"><img src="images/thumbTest_1.jpg" width="50px" height="68px" border="0" />
		<span><img src="images/popoutTest_1.jpg" width="200" height="272" />
        <br />Image Description</span></a>
        </div>

And here's the CSS...

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail
{
position: relative;
z-index: 0;
padding-left:40;
padding-right:40;
}

.thumbnail:hover
{
background-color: transparent;
z-index: 50;
text-decoration: none;
}

.thumbnail span /*CSS for enlarged image*/
{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img /*CSS for enlarged image*/
{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span /*CSS for enlarged image on hover*/
{
visibility: visible;
left: 60px; /*position where enlarged image should offset horizontally */
top: 10px;
}

As I said, this is all working perfectly. However I want to make it where the hover image will sense the border of the browser and self adjust so that the hover image will always be visible and not pop off the side or bottom or the page.

Can this be done with CSS? if not, how can it be done? Thanks for your help and suggestions.

[Troy III]

First: this is not your code (it says its from Dynamic Drive)!
Second: I don't understand your question!

[hericles]

I'm confused too. The hover will appear over the thumbnail (although you can alter that with the left value in the .thumbnail:hover span section.
But if the image is on screen to hover over, the large pic will be on screen too...

[pmcd9]

Thank you for your replies. I am new to this forum and it took me until now to find my way back to this thread.

The further explain my problem I am having is that the hover image is not dynamic enough. Yes, when I hover over the thumbnail the image will appear where I have programmed it with the .left and .top properties of the .thumbnail:hover span css rule. This works fine most of the time with the hover image appearing down 10 pixels from the top and over 60 pixels from the left.

.thumbnail:hover span 
{
visibility: visible;
left: 60px;
top: 10px;
}

However, if the thumbnail is near the bottom or right side of the page on the browser the hover image will appear off the page and scrolling is required to get the hover image on the screen.

I want something that works like the hover images on this forum.

To visually explain what I mean, hover over this link.

Scroll the page so the link is near the top border of the browser and hover. The hover image appears below the link fully inside the page.

Now scroll the page so the link is near the bottom border of the browser and hover. You will see that the hover image is now floating above the link again fully inside the page.

That's what I want my hover image to accomplish, for it to be adjustable, to sense the border of the browser and always appear completely inside the page.

Again thank you for your replies and interest in my problem.

[hericles]

Thanks, that makes it clearer. Your solution lies with JavaScript.
You'll need a script that takes the offset position (position from the left of the page) of the image and adds it's width; If the result is greater than the page width, shift the image to a new position.
This would need to be done for the height as well of course.
I haven't got anything like that to show you at the moment but a Google search should find something. If I fnd anything I'll let you know

[pmcd9]

Thank you Hericles. Can you suggest some search terms. I've tried searching this problem and haven't had any luck