-2

I'd like to program an image gallery, which looks like this one: http://www.volkswagen.de/de.html By default, all buttons have the same size.

When the user hovers over the button, its size increases, meanwhile, all other buttons (aside from the one on the left and right of the button which the user hovers overs) are shrunk.

I assume that it's a mix of CSS and Javascript, but I can't figure out how it works, especially given how the buttons move left and right depending on what's being hovered over.

Could someone please help me?

Jan Nowak
  • 45
  • 1
  • 7
  • 2
    code is right there on their website. Try to learn from it. (Inspect element) – AlFra Oct 11 '16 at 14:55
  • 2
    We do not write up code here, make an effort of your own and if it won't work as expected, post the issue here and we'll have a go try help you out – Asons Oct 11 '16 at 14:56

1 Answers1

2

using jQuery you can do something like this:

$(document).on('hover', 'img', function() {

   // make all images small except this
   $('img').not(this).removeClass('big').addClass('small');

   // make this one large
   $(this).addClass('big');

});

however you should study the example you gave by viewing the source like others have suggested

Ted
  • 3,985
  • 1
  • 20
  • 33
  • 1
    Thank you very much. I apologize for rushing into this without trying first. I am starting at a new job and I wanted to get things started quickly. I apologize. I'll try to act differently next time. – Jan Nowak Oct 12 '16 at 06:38