Display large clickable image in parent div on image mouse hover

Question

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.

are you going to have more than one of those images side by side? If yes prepare for trouble, because as you try to move around the large images will start poping out, forcing you to move around the large ones so they disappear and then the same again. Meanwhile images at the center will be impossible to be reached since the other popup images will cover them etc Have tried it and was disappointed due to usability constraints and settled for click/tap events. Unless someone proposes something really interesting. — melc, Nov 02 '13 at 16:29
I had not considered that yet, but a great point indeed. Perhaps a delay in the hover event would be more usable? — Adam, Nov 02 '13 at 17:53
True a delay does help, but when the images are in a grid as i mentioned it is all a bit strange and not that useable. If you have a row of images it is not much of an issue, the solution provided by jorjordandan looks good. — melc, Nov 02 '13 at 18:07
Actually it will be a grid. So I decided to add a zoom image, which when hovered would show the larger image, see it (not a grid yet) here: http://www.toptrouwen.nl/test.aspx, however, when hovering the zoom image I need to get a parent's child element and I have no idea how to solve that in CSS...any suggestions? — Adam, Nov 03 '13 at 14:14
I'm a little confused - why is there a zoom button? I thought you wanted to zoom on hover? It sounds like a jQuery solution may be necessary, but I have no idea what you are trying to accomplish. It sounds like it shouldn't be that hard, it's really easy to get parent elements with jQuery... — Jordan Davis, Nov 03 '13 at 17:20
@jorjordandan: the reason was the comment made by melc with regard to usability. I'm now aiming for a jquery based solution: http://stackoverflow.com/questions/19757320/apply-selector-after-having-applied-earlier-selector — Adam, Nov 03 '13 at 19:54

Jordan Davis · Accepted Answer · 2013-11-03T17:04:11.837

A css solution would probably work. I found this link:

http://cssdemos.tupence.co.uk/image-popup.htm

It looks a little cheesy but could probably be improved to do what you want. The most relevant part of the code is:

ul.enlarge li: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***/ 
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/ 
top: -300px; /*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***/ 
ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}

That looks pretty good already! Is there a way to add a delay to the showing of the larger image? — Adam, Nov 02 '13 at 17:54
Please include the relevant code in the answer body, link only answers tend to get deleted. — apaul, Nov 03 '13 at 14:33

Display large clickable image in parent div on image mouse hover

1 Answers1