On Hover Image Fade

[lawrencepepper]

Hello,

I am trying to make an image fade on hover and when doing so show a small png image underneath it. Essentially what I want to do is have an image of a magnifying class show up over the image when hovered on so that the person knows that when they click it it will lightbox.

I am using the following CSS. The fading works fine but the image does not show.

img.framed {background:#fff; border:1px solid #CFCFCF; display:block; margin-bottom:20px; padding:4px; border-radius:3px;-moz-border-radius:3px; -webkit-border-radius:3px;box-shadow: 0 1px 3px rgba(0, 0, 0, .3);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);}



img.framed:hover {

opacity: 0.30;                 /* FX, Safari, GC, Opera, decent browsers */

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */

filter: alpha(opacity=30);                                         /* IE */

background-image: url(images/looking.png) center no-repeat;



/* in Safari, FX and Chrome add a fade transition */

-webkit-transition: opacity .25s linear .1s;

transition: opacity .25s linear .1s;

}

Any help would be appreciated.

Thanks.

Lawrence

[serquhart]

i would love to take a look at it for you. jsfiddle?

[lawrencepepper]

http://jsfiddle.net/lawrencepepper/pbwYC/

Please suggest a solution.

Thanks

[joshuanhibbert]

Here are a few fiddles I have done for others in the past:

http://jsfiddle.net/sl1dr/yf3jk/

http://jsfiddle.net/sl1dr/5nkqr/

Feel free to use/alter them as you wish.

[Author]

Posts