Change Photo Opacity When Link Clicked

Im trying to make a gallery of photos with their Categories on top of them. How can i make specific photos opacity increase(or decrease) when their category link is clicked? Im not

Solution 1:

Here is something quite fun :)

Pure CSS!

Improved with checked "link" state

1. The label can be made to look like a link and will change when selected.
2. The label is connected to the checkbox with the matching for and id attribute.
3. Checkbox is hidden with display: none;
4. The order of HTML elements is important.

Have an improved fiddle!

HTML

<input type="checkbox" id="linkOne" />
<div class="category">
    <label for="linkOne">Category One (click me)</label>
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
    <img src="http://www.placehold.it/300" />
</div>

CSS

input[type=checkbox] {
    display: none;
}
input[type=checkbox]:checked + .category img {
    transition: opacity 0.5s ease;
    opacity:0.5;
}
input[type=checkbox] + .category img {
    transition: opacity 0.5s ease;
    opacity:1;
}
label:hover { 
    text-decoration: underline;
    cursor: pointer;
    color: blue;
}
label {
    display: block;
}
input[type=checkbox]:checked + .category label {
    font-weight: bold;
    color: #F00;
}

Solution 2:

I would create a class mapper for each category. It's not a very generic solution with CSS only but at least it gets the job done.

HTML

<div class="gallery">
    <a href="javascript:void(0);" class="sports">sports</a>
    <a href="javascript:void(0);" class="cats">cats</a>
    <a href="javascript:void(0);" class="fashion">fashion</a>
    <a href="javascript:void(0);" class="technics">technics</a>
    <img src="http://lorempixel.com/100/100/abstract" class="abstract" alt="" />
    <img src="http://lorempixel.com/100/100/city" class="city" alt="" />
    <img src="http://lorempixel.com/100/100/people" class="people" alt="" />
    <img src="http://lorempixel.com/100/100/fashion" class="fashion" alt="" />
</div>

Map classes from anchor to image. In CSS3 you can use the ~ tilde selector.

CSS

img {
    opacity: 0.5;
}
a.abstract:active ~ img.abstract,
a.abstract:focus ~ img.abstract {
    opacity: 1;
}

DEMO

If this approach is not flexible enough you might consider a JavaScript solution.

UPDATE

A combination of the hidden input and the class mapper. Please note the behavior is now more of toggle functionality. You can change the type of the input field to radio (and proper name attribute) to match the behavior to my previous demo.

THE trick is to use the labels to trigger the input fields. The placement of the input fields should be inside the image container so you can use the ~ selector in CSS.

DEMO

Solution 3:

You could use the jquery fadeTo function

example from jquery api

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially shown, we can dim it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).fadeTo( "slow" , 0.5, function() {
    // Animation complete.
  });
});

or you could use simple css

img {
    opacity:1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

img:hover {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}