Slider image hovering effect

Question

I'm using clickable logo parade from http://www.smoothdivscroll.com/clickableLogoParade.html to do a logo slider.

Question1: How to make the image bigger upon hovering with the above logo slider?

I tried adjusting the image height and width directly, but I want the image to become bigger in this effect: http://www.morearty.com/blog/2013/06/06/html-css-to-make-an-image-bounce-to-a-larger-size-on-hover/

When one hovers over, the image position still stays in center.

Question2: Instead of having the above logo slider auto scroll, how to make it scroll only upon clicking to a arrow or something?

Answer 1

For Question 1:

Give your images a class (for example scrolling_image) and on mouse over increase the size, and mouse out will return it back to normal:

$( "scrolling_image" ).mouseover(function() {
  $(this).animate({
    "width": "300px",
    "height": "300px"
  }, 2000, function() {
    // Animation complete.
  });
});
$( "scrolling_image" ).mouseout(function() {
  $(this).animate({
    "width": "100px",
    "height": "100px"
  }, 2000, function() {
    // Animation complete.
  });
});

As for your second question, please read the Documentation: