Question

I have a hover solution setup with CSS. However, the hover images don’t respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can’t control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?

I have the following CSS:

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

.thumbnail span { 
    position: absolute;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img { 
    border-width: 0;
    padding: 2px;
}

.thumbnail:hover span { 
    visibility: visible;
    top: 0;
    left: 70px; 
}

To match the following thumbnails with hover:

<li>
    <a href="http://www.yahoo.com" class="img thumbnail">
        <img src="1_s.jpg" />
        <span><img src="1_b.jpg" /></span>
    </a>
</li>
<li>
    <a href="http://www.google.com" class="img thumbnail">
        <img src="2_s.jpg" />
        <span><img src="2_b.jpg" /></span>
    </a>
</li>

I have a sample page here displaying the behavior:

http://estorkdelivery.com/example/example2.html

Hover over the images at the bottom to see the hover image display outside of the viewport.

Thanks!

Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image – both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I’m looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.

Answer 1

I’ve created a bespoke plugin for you!

http://jsfiddle.net/adaz/tAECz/

Well, it’s pretty basic but I think it meets your criteria. You can activate it in two ways:

1) If you can’t be bothered creating thumbnails for every image, you can just simply list your images like this:

<ul id="istockWannabe">
    <li>
        <img src="imgURL" width="600" height="400" title="Description" />
    </li>
    <li>
        <img src="imgURL" width="600" height="400" title="Description" />
    </li>
...
</ul>

2) If you really want to create your own thumbnails, your html should look like this:

<ul id="istockWannabe">
    <li>
        <span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
    </li>
...
</ul>

Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.

The very last thing you need to do is to activate it, if you’re going for the first option, you can just include in your page following code:

<script type="text/javascript">
    $(document).ready(function() {
        $("#istockWannabe").istockWannabe();
    });
</script>

If you’re going for the second option, you need to override default settings like this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#istockWannabe").istockWannabe({ createThumbs: false });
    });
</script>

This is more like a prototype so it’s quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100

If you like it, I’m happy to spend some time on it and adjust it to suit your needs!