CODEWITHSUNDEEP
jquerycsshover
Amara
Amara

Reputation: 211

When hovering over image how to show description overlaying adjacent image?

Hope someone can help me or point me in the right direction.

I want to display a grid of images, where the user can hover over an image to get more info, just as it's been done here.

Is this an easy thing to do? Can I do it with pure CSS or would I need to use jQuery? I just need a pointer in the right direction if possible please?

Upvotes: 1

Views: 3279

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28437

The link you gave seems to first give an hover state of the background image and then via a timeOut it displays a tooltip. I am working on a fiddle to make this clear.

So, here you go. Here is the Fiddle!

The most important thing is the jQuery which contains a delay AND also the hover state of the image stated in the CSS. So when a user hovers the image the first thing he gets is another image. This is done by simple CSS hover and CSS sprites.

.item {
    background-color: white;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top; 
}

.item:hover {
    background-repeat: no-repeat;
    background-position: center bottom; 
}

#flower {
    background-image: url('http://bramvanroy.be/files/images/tooltipOverlay.jpg');
}

When the image is hovered at the beginning, a jQuery function is triggered BUT it is delayed:

var tooltip = $(".item-tooltip");

tooltip.hide();

$(".item-wrapper").hover(
function() {
    $(this).children(tooltip).delay(550).fadeIn("slow");
    $(this).children(".item").fadeOut("slow");
},
...
​

And when the mouse leaves the tooltip, it gets hidden and the .item is shown again:

...  
    function(){
        $(this).children(tooltip).fadeOut("fast");
        $(this).children(".item").fadeIn("fast");
    }
);

IMPROVED ANSWER:

Here is a Showcase, here is the fiddle of that showcase and here is the fiddle in which the image does not change (as you wanted).

I have used the jQuery plugin hoverIntent to make sure that not every image that gets hovered even for a milisecond shows a tooltip. What it does is checking whether it is the user's intention to hover the image and only then (after a certain timeOut) executing the function. More info on this plug in over here. You can use the standard hover() of jQuery, but I won't advise it.

The z-index needed to be changed as well, otherwise the image would appear beneath the tooltip OR the image of the other item would overlap the tooltip of the image that we want.

If you have any more question, please do say so in the comments.

Upvotes: 2

gotofritz
gotofritz

Reputation: 3381

I have looked at what they are doing on that website and it looks over engineered to me.

What I would do is us add 

<div class="comtainer">
    <div id="g11" class="square large" data-show-tooltip-in="#g12, #g12">
        <div class="normal-view"><img ... ></div>
        <div class="large-view"><img ... ></div>
        <div class="tooltip">blah blah</div>
    </div>
    <div id="g12" class="square small" data-show-tooltip-in="#g13">
       ...
    </div>
    ...
</div>

css

div.large-view { display : none; }
div.tooltip    { display : none; }

and then the javascript would do something like (JQuery for speed):

$( '.square' ).on( 'mouseover', function*(e){
     //hides the normal image
     $( this ).find( '.normal-view' ).hide();
     //shows the zoomed image
     $( this ).find( '.large-view' ).show();
     //stores a reference to the square where the HTML tolltip will be shown
     var $tooltip = $( $( this ).attr( 'data-show-tooltip-in' ) );
     //hides the original content of the tooltip square
     $tooltip.find( 'div' ).hide();
     //clones the tooltip to the other square and shows it
     $( this ).find( '.tooltip' ).clone().qppendTo( $tooltip ).show();
})

This is just a starting point, but that's how I would go about it.

EDIT added explanation

In the HTML there is series of div of class square (they could also be li's in a ul list, but that's unimportant now). Each square has all the data it needs - the normal image, the zoomed image, and the tooltip HTML. The last two are hidden in CSS. Each square has also a data- attribute (data-show-tooltip-in) with the selector(s) where the tooltip will be displayed.

Then the JS makes does the rest - the comments should help.

Upvotes: 1

chadpeppers
chadpeppers

Reputation: 2057

What i would do is use jquery. Create a div that is visible and then one that is hidden that displays the information you want to when you hover. Then simply use jquery to hide/show that div using css.

$(".info-class").hover(function(){
    $(this).css('display', 'none');
    $(".other-clas").css('display', 'block');
});

Something similar to above

Upvotes: 1

Related Questions