Question

128

Change opacity on hover

rated 0 times [ 130] [ 2] / answers: 1 / hits: 15709 / 11 Years ago, sat, september 7, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

krystadesiraeo

Add To Favorites

Follow

Total Points: 493

Total Questions: 93

Total Answers: 100

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

answered 11 Years ago travion · Accepted Answer

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.