Question

Sorry for the title, I really couldn’t think of how to simplify this problem.

Now, the problem is this: I have a row of thumbnail images in a div:

<div id="daumen">

<a href='#' class='gsc_thumb_row'>
    <img src='image1.jpg' class='thumbnails' />
</a>

<a href='#' class='gsc_thumb_row'>
    <img src='image2.jpg' class='current-thumbnail'/>
</a>

<a href='#' class='gsc_thumb_row'>
     <img src='image3.jpg' class='thumbnails' />
</a>

</div>

(I can’t change the HTML, it’s delivered by a script.)

As you may have noticed, two of these have the class “thumbnails”, and one “current-thumbnail”.

What I’d like to happen is this:
By default, all images except for the current thumbnail have an opacity of 0.5.
On mouseover, the opacity should change to 1.

The CSS I’m using:

#daumen {

    }

#daumen img:hover{
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    }

#daumen img{
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
    }

.current-thumbnail a:link{
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    }        

.thumbnails {

    }

.current-thumbnail {

}

​

So far, all of this works except that the current thumbnail’s opacity is also set to 0.5 – how can I avoid this?

I’m sure there’s a very simple solution, but I’ve been fiddling around with the CSS for far to long already.

I put it in a Fiddle for you: http://jsfiddle.net/6DGAx/

Thanks in advance,
Cenk

Answer 1

Make it a more specific selector:

#daumen .current-thumbnail a:link{

Also, make sure your markup matches your CSS because your img has that class………