Why are my images moving from Jquery bounce effect?

Question

I just want the bounce effect to be on the mousover of the #bounce1,2,3... images on the homepage, but it seems to be forcing images to the next line.

what gives?

http://jameshiggins.ca/nlms/

Answer 1

You can achieve the same effect without JavaScript and jQuery, using only CSS3. Use @keyframes to define the key frames and then use it in animation property. Here is the JSFiddle demo regarding to your example.
For more information about the animation property of CSS3 please check this URL .

Answer 2

You'll want to add this to your style sheet.

#fp_brands a .ui-effects-wrapper { 
float: left !important; 
width: 33% !important;
}

The ui-effect-wrapper div that jquery-ui uses in it's animations can sometimes mess up floated elements. This is because it's css rules include width: 100%; and float: none;

Answer 3

Using the element inspector, applying float:left; to each image made them animate as desired. I would apply it to the class attachment-medium if you don't use it anywhere else to save code

Answer 4

Try to add this css and remove width="33%" from img tag?

.attachment-medium {
    position:relative;
    width:235px;
    height:100px;
}