jquery css zoom icon to images with opacity

Question

I like to read articles and for add zoom icon in image hover using jquery and css. i add css opacity in hover image. this worked when i hover image (mouse curser on image) but when i mouse curser on zoom icon, css opacity is hidden on image. any way to fix this for opacity image in all hover ( image + zoom icon ). Thanks

Demo in jsfiddle : HERE

Answer 1

You need to set the opacity while hovering the a, not the img.

#gallery2 a:hover img{
    opacity:0.6;
    filter:alpha(opacity=60);
}