Change opacity on hover

Question

How do I make it so that the opacity is normal until someone hovers over it and when they hover over it the picture lights up but sends the other images to the background? I also want the images to fade in and out.

Example

Here's the jsfiddle

img { 
opacity: 0.7; 
} 

img:hover { 
opacity: 1; 
}
.radio div[type='radio'] {
background: transparent;
border:0px solid #dcdcdc;
border-radius:10px;
padding:0px;
display: inline-block;
margin-left: 5px;
cursor:pointer;
text-align: left;
opacity: 0.7;
}
.radio div:hover[type='radio'] {
opacity: 1; 
}

That opacity is fine but I want the images to have their normal opacity until someone hovers over it.

Answer 1

I added a simple class and this JS to accomplish what you're looking for:

$('.radio').on('mouseover mouseout', 'div[type="radio"]', function(){    
    $(this).siblings().toggleClass('hover');
});

.radio div[type='radio'].hover {
    opacity: 0.5;
}

http://jsfiddle.net/Cx35C/3/

I removed the image-targeted CSS, as its parent opacity will trickle down. Also added in a transition similar to what Gazelle has.

Answer 2

I would like to contribute a pure CSS solution to this

Demo

ul li {
    display: inline-block;
}

ul li img {
    opacity: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

ul:hover li img {
    opacity: .5;
}

ul:hover li img:hover {
    opacity: 1;
}

---

I will go step by step to explain this, first of all sorry for making this from scratch, your HTML was killing me, so coming to the explanation, first am making all the li inline, than am using ul li img and setting all images to opacity: 1;, well not required but I did set, later am using transition property for smoothing up the animation. The next selector is ul:hover li img, will simply make images opaque to .5 when you hover over ul this means it will set opaque all the images to .5, and at last we set opacity to 1 when you hover any image by using ul:hover li img:hover

Answer 3

This kind of functionality is better achieved with Javascript. Take a look at this JS Fiddle: http://jsfiddle.net/LgZeB/4/

$('.images a').on('mouseover', function () {
    $('.images a').not(this).addClass('fade');
}).on('mouseout', function() {
    $('.images a').removeClass('fade');
});

With jQuery, I'm able to plug into the "mouseover" and "mouseout" functions of the DOM element. Then I can add or remove the relevant CSS class which sets the opacity attribute.