How to Change Image on hover

Question

I'm attempting to set up a way for users to be able to hover over a small preview of an image and have a "featured" section show this image in its full size. I've managed to accomplish that with the code below.

My problem is when images are very different sizes (one landscape and one portrait It looks very bad and makes the page jump.

Goal: I'm trying to figure out a way to avoid this. I want to find a way to display the main image in a uniformed look. Aka the same size. I want to accomplish this without heavily distorting the images by changing their sizes. Any help is hugely appreciated.

Check out the JS fiddle: https://jsfiddle.net/4hrvxpe2/10/

HTML:

<img  id='mainPicture' class="image-resposive" src= "https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>

<div class='smallerImages'>

     <img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">

     <img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">

 </div>

CSS:

.smallerImages{
display:inline-block;
}

#mainPicture{
width: 75%;
height: 75%;
display: table; margin: 0 auto;
}

.small{
    max-width: 15%;
    max-height: 15%;
    min-width: 15%!important;
    min-height: 15%!important;
}

Jquery:

   $('#imageNum1').hover(function() {

    $('.small').removeClass('selectedImage')

   var src = $('#imageNum1').attr('src');
   $('#imageNum1').addClass('selectedImage')
   $('#mainPicture').attr('src', src);


  });

   $('#imageNum2').hover(function() {

    $('.small').removeClass('selectedImage')

   var src = $('#imageNum2').attr('src');
   $('#imageNum2').addClass('selectedImage')
   $('#mainPicture').attr('src', src);

   });

Answer 1

I accomplished the goal by changing 15% of maximum and minimum width in .small to 15vw.

.small{
    max-width: 15vw;
    max-height: 15%;
    min-width: 15vw!important;
    min-height: 15%!important;
}

vw is for the viewport width, while % will take the content size and size it relative to that. When the image changes, because of the image size differences, that image is increasing the content width, meaning that anything using % will change to the new width.

Here's the JSFiddle.

Answer 2

If you don't want the images to affect the rest of the elements in the document you need to take them out of the flow.

This is possible if you give the selected image a fixed position and make use of the transform property.

With that being said, here's a very rough example of how I would do it.

Responsive example (open in full screen and resize the window):

$('#imageNum1').hover(function() {

  $('.small').removeClass('selectedImage')

  var src = $('#imageNum1').attr('src');
  $('#imageNum1').addClass('selectedImage')
  $('#mainPicture').attr('src', src);


});

$('#imageNum2').hover(function() {

  $('.small').removeClass('selectedImage')

  var src = $('#imageNum2').attr('src');
  $('#imageNum2').addClass('selectedImage')
  $('#mainPicture').attr('src', src);

});

body {
  position: relative
}

.smallerImages {
  width: 20%;
}

#mainPicture {
  max-width: 55vw;
  max-height: 75vh;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.small {
  width: 100%;
  margin: .5em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='smallerImages'>

  <img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">



  <img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">

</div>

<img id='mainPicture' class="image-resposive" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>

Answer 3

My best attempt so far is the following. This works okay but it does distort images that are very tall. Can anyone suggest improvements?

JSFiddle: https://jsfiddle.net/4hrvxpe2/26/

.small{
    max-width: 10%;
    height: 100px;
    min-width: 10%!important;
}

.smallerImages{
margin: 0 auto;
}

#mainPicture{
width:  100%;
height: 600px;
display: table; margin: 0 auto;
}

Answer 4

Adding a max-height and max-width makes it better.

Check out https://jsfiddle.net/4hrvxpe2/13/

Or you can encapsulate it in a div. Something like

<div class="container"><img src="img.jpg"></div>

and give dimensions to the container, as in:

  .container{ 
        height: 100px; width: 200px; overflow: hidden; 
   }

Check out https://jsfiddle.net/4hrvxpe2/22/

Or

In order for the image to take a fixed size always use a div and set it as its background and make it cover the div:

Check out https://jsfiddle.net/4hrvxpe2/23/