I'm looking for a plugin that as soon as the visitor hovers his mouse over a zoom image, will display a larger clickable image and when the visitor moves his mouse outside this larger image will hide that image again. I've been searching on http://plugins.jquery.com/ and Google/Bing but nothing meets my requirements.
My HTML (updated based on answers by melc and jorjordandan)
<div id="productoverview">
<div class="product1">
<div class="prodtitle">
<span itemprop="name"><asp:Literal ID="Literal11" runat="server" /></span>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="price">
<span itemprop="price"><asp:Literal ID="Literal12" runat="server" /> <asp:Literal ID="Literal13" runat="server" /> <asp:Literal ID="Literal14" runat="server" /></span>
</div>
</div>
<div class="description">
<div class="image">
<a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image-->
<br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
</span>
</a>
</div>
<span itemprop="description"><asp:Literal ID="Literal15" runat="server" /></span>
</div>
<div class="stock"><asp:Literal ID="ltStockStatus" runat="server" /></div>
<div class="actionmenu">
<img src="/images/zoom.png" class="productzoom pointer" />
<a class="link viewproduct" href="#" title="">view</a>
<a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a>
</div>
</div>
<div class="product1">
<div class="prodtitle">
<span itemprop="name"><asp:Literal ID="Literal1" runat="server" /></span>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="price">
<span itemprop="price"><asp:Literal ID="Literal2" runat="server" /> <asp:Literal ID="Literal3" runat="server" /> <asp:Literal ID="Literal4" runat="server" /></span>
</div>
</div>
<div class="description">
<div class="image">
<a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image-->
<br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
</span>
</a>
</div>
<span itemprop="description"><asp:Literal ID="Literal5" runat="server" /></span>
</div>
<div class="stock"><asp:Literal ID="Literal16" runat="server" /></div>
<div class="actionmenu">
<img src="/images/zoom.png" class="productzoom pointer" />
<a class="link viewproduct" href="#" title="">view</a>
<a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a>
</div>
</div>
<div class="product1">
<div class="prodtitle">
<span itemprop="name"><asp:Literal ID="Literal6" runat="server" /></span>
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="price">
<span itemprop="price"><asp:Literal ID="Literal7" runat="server" /> <asp:Literal ID="Literal8" runat="server" /> <asp:Literal ID="Literal9" runat="server" /></span>
</div>
</div>
<div class="description">
<div class="image">
<a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image-->
<br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
</span>
</a>
</div>
<span itemprop="description"><asp:Literal ID="Literal10" runat="server" /></span>
</div>
<div class="stock"><asp:Literal ID="Literal17" runat="server" /></div>
<div class="actionmenu">
<img src="/images/zoom.png" class="productzoom pointer" />
<a class="link viewproduct" href="#" title="">view</a>
<a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a>
</div>
</div>
</div>
CSS
/***Style the unordered list with the class 'enlarge'***/
#productoverview {
display:inline-block; /*places the images in a line*/
position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
}
/***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
#productoverview span{
position:absolute; /*see support section for more info on positioning*/
left: -9999px; /*moves the span off the page, effectively hidding it from view*/
}
#productoverview .productzoom:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
#productoverview .productzoom:hover .image .span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
top: -50px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/
#productoverview .product1:nth-child(2) .productzoom:hover span{
left: 100px;
}
#productoverview .product1:nth-child(3) .productzoom:hover span{
left: 200px;
}
/*
#productoverview .productzoom:hover:nth-child(2) span{
left: -100px;
}
#productoverview .image:hover:nth-child(3) span{
left: -200px;
}
*/
/***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
#productoverview span img{
padding: 2px; /*size of the frame*/
background: #ccc; /*colour of the frame*/
}
/***Style the <span> containing the framed images and the caption***/
#productoverview span{
/**Style the frame**/
padding: 4px; /*size of the frame*/
background:#eae9d4; /*colour of the frame*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
/*give the corners a curve*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius:6px;
/**Style the caption**/
font-family: 'Droid Sans', sans-serif; /*Droid Sans is available from Google fonts*/
font-size:.9em;
text-align: center;
color: #495a62;
}
The problem with this is, is that the zoom image is not directly related to the larger image I want to show, so it look like I need to select the zoom button parent of parent and then select the .image.span element to change the style on that. I checked this post: Is there a CSS parent selector?. So now I'm not sure how to continue from here.