Rollover Animation for Masonry JQuery

Question

I am using the jquery masonry on my website http://zakiyadavidson.com .

I am wanting to do a rollover effect such as what is on http://damiencorrell.com/ . My end result would be when you rollover a picture text appears.

I attempted to add in the below js code:

    //Set div dimensions equal to image's dimensions:
$('#image_holder1').width($('#image_1').width());
$('#image_holder1').height($('#image_1').height());
$('#image_1').each(function(){
//set css of right:
$(this).css({right: '-' + $(this).width() + 'px'})})
    //tell the browser what to do when hovering on the div:
    $('#image_holder1').hover(function() {
  //when mouse hover:
$('#image_0').animate({
    right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
    right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
},

function() {
//when mouse out, no hover:
$('#image_0').animate({
    right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
    right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
});​

Along with the above js code I added in the css block below:

#image_holder1 {
overflow: hidden;
}

.image1 {
position: absolute;
}​

The masonry html looks like the below with the above added changes:

<div class="box photo col3" id="image_holder1">
  <img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" />
  <img id="image_1" src="image_17Hover.jpg" />

...

Rather than the images showing as you mouse over you are able to see it soon as you load the page. The masonry layout is now not aligned properly. Is it because I have the function under the onload event? Any assistance is greatly appreciated.

Answer 1

I figured it out!!!

A simple Jquery script does the trick and will allow you to do as many pictures as necessary!!

<script>

jQuery(function () {
$(".imgSwap img").hover(function () {
    this.src = this.src.replace("_off", "_on");
}, function () {
    this.src = this.src.replace("_on", "_off");
});
});

</script>

I hope this helps others of you.

You can check out the working script by going to my site http://zakiyadavidson.com