Question

The following code shows the image in the div tag.

<div class='item'>
        <img class='img' src="image1.png" alt="" />
</div>

I am using the following css to add effects to the html image code:

img{
width:50px;
height:50px;
opacity:0.4;
filter:alpha(opacity=40);

}

img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

I am using this to have opacity effects in css. With this code, the opacity effect works well when I hover over the image itself. But how do I make it so that the opacity effect on the image occurs when I hover over the div tag instead. I want to be able to hover over any part of the item div which encapsulated the image, to get the change opacity effect on the image. NB effect on just the image not the entire div. Can this be done in css? If so how?

Answer 1

Change this:

img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

to

.item:hover img{
opacity:1.0;
filter:alpha(opacity=100);
}

This will change the opacity of the img when the div is in hover state.