-4

If we open the following website - http://www.gazelle.com/ and mouse over the image, we see some effect on images (all images are grayed out and only one images is colored).

Please, just call the name of the effect, I will investigate more by myself and I can write code, I just do not understand the core idea.

I tried to look into the code. First I thought that they change images on mouse over, but this is not true. I see that there is only on image displayed: http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png

4
  • Have a look at api.jquery.com/fadeTo and read the SO FAQ
    – flec
    Jan 26, 2013 at 10:25
  • Yes, used as a background-image for a list of links, and if digg a bit deeper, it is a simply change of the opacity of the A-Element. No question, just laziness. Jan 26, 2013 at 10:25
  • They didn't get the effect quite right tho... Hover multiple times and you'll see. They need to use stop
    – elclanrs
    Jan 26, 2013 at 10:27
  • I have spent quite long time to understand this. Why you downvoted this question? I have never used opacity before. I do not even ask to code anything, just call the effect. I have looke into HTML and didn't see it.
    – renathy
    Jan 26, 2013 at 13:51

4 Answers 4

2

I'd do it by using CSS and the :hover CSS pseudo-class like this:

<ul>
    <li class="one">Object 1</li>
    <li class="two">Object 2</li>
    <li class="three">Object 3</li>
</ul>

and

ul li {
    width: 110px;
    height: 180px;
    text-align: center;
    display: inline-block;
    background: url('http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png') no-repeat 0 0;
}
ul:hover > li {
    opacity: 0.6;
}
ul li:hover {
    opacity: 1;   
}
ul li.one {
    background-position: -110px 20px;   
}
ul li.two {
    width: 120px;
    background-position: -230px 20px;   
}
ul li.three {
    width: 100px;
    background-position: -365px 20px;   
}

http://jsfiddle.net/xESQK/

Another solution would be jQuery with the same HTML (could use a timeout here):

$(document).ready(function() {
    $('ul li').bind('mouseover', function() {
        $siblings = $(this).siblings();
        $siblings.animate({"opacity": "0.4"}, "fast"); 
    }).bind('mouseout', function() {
        $siblings.css('opacity', 1).stop(); 
    });
});

http://jsfiddle.net/xESQK/2/

2

Each <li> element has the background image that you discovered. And the background-position is different for each <li>. (This way each <li> shows one image)

There is a css rule (it can be a javascript function too) that changes the oppacity of the other images when your mouse cursor is over one image. i.e. if you put the mouse over the ipad, all others <li> will have the opacity set to 0.5

This is the way the website achieve the effect.

Edited: If you inspect the HTML elements, you probably will see all this behavior occurring.

2

Two style rules will suffice. Assume there is a .container element which contains a number of .image elements. The .image elements can be IMGs or DIVs or LIs with background sprite image as in the example you mentioned, that doesn't matter. The effect can be achieved like this:

.container:hover .image { opacity: .5; }
.container:hover .image:hover { opacity: 1; }
0

You may use like this. DEmo

$(document).ready(function() {

    $('#special a').bind('mouseover', function(){
        $(this).parent('li').css({position:'relative'});
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': 'orange',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.5
        }).bind('mouseout', function(){
            $(this).remove();
        }).insertAfter(this);
    });

});

Not the answer you're looking for? Browse other questions tagged or ask your own question.