Can images under other have focus (for hovering over)?

Question

I have a page-full of thumbnails, let's call them A,B,C, etc. They are laid out like:

A,B,C,D,E,

F,G,H,I,J,

K,L,M,N .. etc.

When you hover-over one, it gets z-index:+1 and enlarges to 2.5 times size - hence, if we hover over A, it enlarges & completely obscures B and F and G.

Therefore to next see e.g. B one must move the mouse away from the enlarged version of A (at which point another image with enlarge) and then move the mouse back to B.

Hence lots to screen 'flashing' etc.

Is there a way to display A, but when the mouse moves away from its top-left portion, the underlying next in line (B) has focus and enlarges.

I looked at HTML's <area> and <map> tags but without success.

Currently I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>

<style type="text/css">
.figcaption {
    color:green; display:block; min-width:120px;
}
.F1  {
     float:left; width:120px;  background:yellow; padding:0;margin:0;text-align:center; font-size:12px;
     font-weight:bold;position:relative;vertical-align:bottom; }

.I1 {
     float:left; width:100%;width:120px;height:107px;
     }
.I1:hover { width:300px; height:auto;position: absolute; z-index:1; left:0px; top:0;}
/*  cant get next line to work
.F1:hover > .I1 { width:300px; height:auto;position: absolute; z-index:1; left:0px; top:0;}  cant get this to work
*/
.F1:hover +  .figcaptionX {  position: absolute;background:fuchsia; }
</style>
</head>
<body>
<div id="wrapper" style="width:600px;">
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf1.jpg?v=1345760446   " title="     Thomas Morris" /><br /><figcaption>DGF 1</figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf2.jpg?v=1345797337   " title="   New Orleans Owls - The Owls' Hoot   " /> <figcaption>DGF 2</figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf03.jpg?v=1345797531  " title="   Johnny Dodds    " /> <figcaption>DGF 3 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf04.jpg?v=1345797743  " title="   Tony Parenti    " /> <figcaption>DGF 4 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf05.jpg?v=1345797920  " title="   Sizzling the Blues : New Orleans 1927-29    " /> <figcaption>DGF 5 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf06.jpg?v=1345798454  " title="   Dixieland Jug Blowers   " /> <figcaption>DGF 6 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf07.jpg?v=1345798694  " title="   That's My Stuff : Chicago 1929-30   " /> <figcaption>DGF 7 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf08.jpg?v=1345798987  " title="   Hot Notes New York Volume 1 " /> <figcaption>DGF 8 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf09.jpg?v=1345799007  " title="   Chicago 1929-30 : Get Easy Blues    " /> <figcaption>DGF 9 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf10.jpg?v=1345797064  " title="   Clifford Hayes  " /> <figcaption>DGF10 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf11.jpg?v=1345797138  " title="   Thumpin' &amp; Bumpin' : New York Volume 2  " /> <figcaption>DGF11 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf12.jpg?v=1345797166  " title="   Don't Leave Me Here : New York Volume 3 " /> <figcaption>DGF12 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf13.jpg?v=1345797205  " title="   Alexander, Where's that Band?   " /> <figcaption>DGF13 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf14.jpg?v=1345797221  " title="   Dreaming the Hours Away : Clarence Williams Vol: 1  " /> <figcaption>DGF14 </figcaption></figure>
<figure class="F1"><img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf15.jpg?v=1345797241  " title="   Memphis Jug Band Volume 1   " /> <figcaption>DGF15 </figcaption></figure>
...</div> <!-- end of wrapper div -->
</body>
</html>

I can use JavaScript/JQuery if needed.

This looks weird. Why don't you enlarge the images only when the user clicks on them? — kol, Sep 10 '14 at 20:26
You should consider doing that with JS where you disable any animations when one is in effect and for a little delay afterwards. This will give the user enough time to interact. Can you post a fiddle with your code? — Ramy Nasr, Sep 10 '14 at 20:50
This may give you some ideas... maybe couple the principle here with a setInterval, or some other way to throttle checking what's under the cursor as it moves across the expanded image. http://stackoverflow.com/a/17978065/1998238 — wwwmarty, Sep 10 '14 at 20:56
I would suggest you https://github.com/jmar/jquery-hoverZoom this one helped me lot of times. — Giannis Grivas, Sep 10 '14 at 21:01

score 2 · Answer 1 · answered Sep 10 '14 at 21:13

2

The problem you have is, that the .F1 elements still stays in hover state even when the mouse is "outside" of their area, as long as the child element (.I1) is hovered.

There is a way to circumvent the problem, althoug it is a bit hacky, as it needs an additional div element just for the effect. Add an additional div element to the html like this:

<figure class="F1"><div class="hoverme"></div><img class="I1" src="..." /></figure>

Next you use the following rules for your CSS:

.hoverme { position: absolute; width: 100%; height: 100%; z-index:2; }
.F1 > .hoverme:hover ~ .I1 { width:300px; height:auto; position: absolute; z-index:1; left:0px; top:0;}

The trick is, that we are using an overlay element (with z-index:2) which "senses" the hover, but the CSS rules are applied to the .I1 via the CSS sibling selector (~).

answered Sep 10 '14 at 21:13

JHoffmann

722
8
17

Brilliant and thanks @JHoffmann works a treat. Out of interest, why did you use: .F1 > .hoverme:hover ~ .I1 { ... } rather than: .hoverme:hover ~ .I1 { ... } – user801347 Sep 11 '14 at 14:27
There was no necessity to add the .F1 > part, but I just kept using it as the other rules used it and I like to make related rules look similar :-). – JHoffmann Sep 12 '14 at 02:21
Thanks everyone - I got it all working - then tested it in ie8 and the .F1 > .hoverme:hover ~ .I1 { ... } selectors DON'T work. But I read that the child and general sibling selectors ARE supposed to work in ie8. Can someone confirm please? – user801347 Sep 17 '14 at 22:14
@user801347 I don't know if you managed to fix this yet (it's been a while and i havent been following here). Maybe the problem with IE8 is related to this: http://stackoverflow.com/questions/6269831/hover-effects-not-working-with-ie8 – JHoffmann Nov 23 '14 at 00:30

Fenistil · Answer 2 · 2014-09-11T13:56:44.510

You can put fully transparent elements over the original images (with the same floating style) and make a JavaScript that uses these transparent elements to track the mouse and resize the images beneath them.

<style>
.figcaption {
    color:green; display:block; min-width:120px;
}
.F1  {
     float:left; width:120px;  background:yellow; padding:0;margin:0;text-align:center; font-size:12px;
     font-weight:bold;position:relative;vertical-align:bottom; }

.I1 {
     float:left; width:100%;width:120px;height:107px; position: absolute; left: 0px; top: 0px;
     }

.hover_div {
    position: absolute;
    z-index: 100;
    opacity: 0.5;

    width: 120px;
    height: 107px;
    top: 0px;
    left: 0px;

}

figcaption {
    margin-top: 107px;
}

</style>

<body>

<div id="wrapper" style="width:600px;">

    <figure class="F1">
        <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf1.jpg?v=1345760446   " title="     Thomas Morris" />
        <figcaption>DGF 1</figcaption>
        <div class="hover_div" style="background-color: red;"></div>
    </figure>


    <figure class="F1">
        <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf2.jpg?v=1345797337   " title="   New Orleans Owls - The Owls' Hoot   " /> 
        <figcaption>DGF 2</figcaption>
         <div class="hover_div" style="background-color: green;"></div>
    </figure>

    <figure class="F1">
        <img class="I1" src="http://cdn.shopify.com/s/files/1/0175/2200/products/dgf03.jpg?v=1345797531  " title="   Johnny Dodds    " /> 
        <figcaption>DGF 3 </figcaption>
         <div class="hover_div" style="background-color: blue;"></div>
    </figure>


</div> <!-- end of wrapper div -->

<script>

$(document).ready(function() {
    $('.hover_div').mouseenter(function(){
        var $img = $(this).siblings('.I1');
        $img.css('z-index','99');
        $img.animate({
            width: 240,
            height: 214
        });
    })
    .mouseout(function(){
        var $img = $(this).siblings('.I1');
        $img.css('z-index','1');
        $img.animate({
            width: 120,
            height: 107
        });

    });
});
</script>

JSFiddle

You can remove the div's background color style, it just for the clear vision. And don't forget to set the div_hover's opacity to 0.

Thanks @Fenistil I get the idea, but on your JSFiddle there is a display abberation - you will see it if you put 3 rows of 3 images. I think it's caused by 'figcaption' moving with the enlarged image (but I can't see why it's doing this) it used to stay still. — user801347, Sep 11 '14 at 13:40

Can images under other have focus (for hovering over)?

2 Answers2