how to get a hover effect with jQuery?? Its not wo

Question

I'm trying to get hover effect similar to this example. But couldn't get it. Here is the link

Answer 1

It looks like the code copied to the new page is missing the position:relative, which would fix the issue. Now, for security, you may want to limit the height of the block and set the overflow to hidden.

Answer 2

Your image is 404ing due to your css rule for .project .thumb a{}
It points to "images/snbw_thumb.jpg" but you'll likely want to use "/images/snbw_thumb.jpg"

Bad URL : http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg

Good URL : http://dragonfly.zymichost.com/images/snbw_thumb.jpg

(Also, it looks like your pages aren't really serving 404s as the bad URL )

Hope this helps

-Chris

Answer 3

On test page this is your css:

.thumb {
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */
}

On production page:

.project .thumb {
width: 260px;
float: left;
}

Add position: relative to .project .thumb

Answer 4

Your <script> tag references a jquery-1.2.6.min.js which does not exist. Put that file in the same directory as hovereffect.html on your web server.

Or, perhaps even better, get JQuery from Google Libraries:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Answer 5

The reason it's not working is because you are missing a css property

.project .thumb img {position:absolute}

notice that you have this line in your test page.

the way you are using jQuery's animate function to change the position of the top image {top:150px}, so you need make it absolutely position for this to work.

Also the .project .thumb a line is missing it's width and height.

Also note that if you just add that line, the affect still won't be the way you expect. Create an outer div with an overflow:hidden.

Answer 6

Its because in your real project your css is in the /css directory. So your CSS style is looking for /css/images/snbw_thumb.jpg which doesn't exist. Change your CSS style to ../images/snbw_thumb.jpg and it should fix it.