CODEWITHSUNDEEP
jquerycss
BBKing
BBKing

Reputation: 2299

jquery css zoom icon to images with opacity

I like to read articles on Here 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

Upvotes: 0

Views: 3359

Answers (3)

pomeh
pomeh

Reputation: 4902

You have to move the :hover from the img element to the a element. Here is a working demo http://jsfiddle.net/pomeh/3mSLs/3/. BTW, you don't need Javascript to show/hide the icon :)

HTML code

<div id="gallery2">   
    <a href="http://www.imagehost.co.za/thumb-CF6F_4F945924.jpg">  
        <img src="http://www.imagehost.co.za/thumb-CF6F_4F945924.jpg" />
        <span></span>
    </a>
</div>​

CSS code

#gallery2 a span {
    background-image:url(http://www.jankoatwarpspeed.com/examples/zoom_icon/zoom.png);
    background-repeat:no-repeat;
    width:48px;
    height:48px;
    position:absolute;
    left:15px;
    top:15px;
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: opacity 0.6s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.6s linear;  /* FF4+ */
        -ms-transition: opacity 0.6s linear;  /* IE10 */
         -o-transition: opacity 0.6s linear;  /* Opera 10.5+ */
            transition: opacity 0.6s linear;
}

#gallery2 img {
    border: solid 1px #999;
    padding:5px;
}

/* when you hover the A element, fade the image */
#gallery2 a:hover img {
    opacity:0.6;
    filter:alpha(opacity=60);
}

/* no need for Javascript to show the span element */
#gallery2 a:hover span {
    -webkit-transition: opacity 0.6s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.6s linear;  /* FF4+ */
        -ms-transition: opacity 0.6s linear;  /* IE10 */
         -o-transition: opacity 0.6s linear;  /* Opera 10.5+ */
            transition: opacity 0.6s linear;
    opacity: 1;
    filter:alpha(opacity=100);
}

Upvotes: 1

skip405
skip405

Reputation: 6279

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

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

The working example of it: http://jsfiddle.net/skip405/X7N33/1/

Upvotes: 1

matpol
matpol

Reputation: 3074

it's because you are hover over the icon not the image. If you add the hover event to the icon too so when you hover over the icon the image opacity changes you should be ok.

Upvotes: 0

Related Questions