CODEWITHSUNDEEP
jquery-hover
dragonfly
dragonfly

Reputation: 3227

how to get a hover effect with jQuery?? Its not working for me

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

Upvotes: 0

Views: 315

Answers (7)

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

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

Upvotes: 1

ak3nat0n
ak3nat0n

Reputation: 6298

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.

Upvotes: 2

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13352

You want to specify height:150px; on your outer class (.outer). Currently it's set to 250px which is too tall.

Upvotes: 1

Quang Van
Quang Van

Reputation: 12095

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.

Upvotes: 1

Chris Gaudreau
Chris Gaudreau

Reputation: 21

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

Upvotes: 0

user342706
user342706

Reputation:

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.

Upvotes: 0

Håvard S
Håvard S

Reputation: 23886

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>

Upvotes: 2

Related Questions