Search jQuery

jQuery Forum

Help fading an image

in Using jQuery • 9 years ago

Here is the website I am tring to build
http://kellymacphee.com/test/portfolio.html

Each picture has one behind it, and I am trying to get the top image to fade when hovered so you can see the one underneath it, but all it does is fade both images.
I have tried using img:first, but doesn't seem to be working.

Can anyone help??

Thanks

Replies(4)

rminde

Re: Help fading an image

9 years ago

try this:

$('ul#portfolio li')
.find('img:first').css({position: "absolute", zIndex:"2", top: "0px", left: "0px"})
.end()
.find('img:last').css({position: "absolute", zIndex:"1", top: "0px", left: "0px"})
.end()
.find('p').css({position: "absolute", zIndex:"3", bottom: "0px", left: "0px"});

Przemek

Re: Help fading an image

9 years ago

Or this:

HTML:

<li style="background: url('http://kellymacphee.com/test/images/black-and-white-fade.jpg') no-repeat; "><a href="black-and-white.html"><img alt="Black and White" src="http://kellymacphee.com/test/images/black-and-white.jpg" /></a>
<p>Black and White</p></li>

JS: