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);

   });

The most viable solution and "smart" would be to pre-edit all your images, for instance in photoshop (or paint at least). Then you display all that in a container (for instance div) with a fixed size.... Personally I don't think that fixing that issue via coding is a good solution (it s about image edition and rendering not coding) — Jason Krs, Aug 03 '17 at 23:37
@JasonKrs Thanks for commenting! The issue is users post the images. So I have no control over the editing before hand. — AndrewLeonardi, Aug 03 '17 at 23:40
Himanshu ha a nice option below... I found a library that does exactly what you want.. Check `filestack.js` at https://www.filestack.com/docs/image-transformations/resize — Jason Krs, Aug 04 '17 at 00:09

Himanshu Arora · Answer 1 · 2017-08-03T23:57:57.760

1

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/

edited Aug 03 '17 at 23:57

answered Aug 03 '17 at 23:38

Himanshu Arora

2,368
3
22
33

@JasonKrs have tried to give 3 options to help. I guess 3rd one would probably be useful for him – Himanshu Arora Aug 04 '17 at 00:01
Yeah as far as I'm concerned, you nailed it with option 3 – Jason Krs Aug 04 '17 at 00:06
OP's trying to make the images responsive, third option uses absolute values. – JediBurrell Aug 04 '17 at 00:08

score 1 · Answer 2 · answered Aug 04 '17 at 00:17

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>

JediBurrell · Answer 3 · 2017-08-04T00:54:54.257

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.

score 0 · Accepted Answer · answered Aug 04 '17 at 00:05

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;
}

How to Change Image on hover

4 Answers4