Take the 2-minute tour ×

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

share|improve this question

closed as too localized by jantimon, lanzz, Juhana, undefined, George Stocker Jan 29 '13 at 13:18


Have a look at api.jquery.com/fadeTo and read the SO FAQ –  flec Jan 26 '13 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. –  axel.michel Jan 26 '13 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 '13 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 '13 at 13:51
add comment

4 Answers

up vote 2 down vote accepted

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

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


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;   


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(); 


share|improve this answer
add comment

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.

share|improve this answer
add comment

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; }
share|improve this answer
add comment

You may use like this. DEmo

$(document).ready(function() {

    $('#special a').bind('mouseover', function(){
        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

share|improve this answer
add comment
