How to load various hover images

Question

I work in an e-commerce application. In this, I want to complete the task below ...

When I'm in smaller images, I need to show the corresponding images in a large box.

In this, the large image size is 2000 * 2000 pixels and the smaller image size is 80 * 80. But I have large images for the corresponding smaller images in another folder. I want to load a large image into a large box when I find in the corresponding smaller image ...

I did something, but it does not work for me ...

$('img[id^=sm00]').click(function() {
  $('#ProductImage').attr('src', $(this).attr('src'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img1" class="img-thumbnail">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img1" class="img-thumbnail">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img1" class="img-thumbnail">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img1" class="img-thumbnail">
  </div>
</div>

Run codeHide result

Answer 1

. , , ref . , click, , .

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).attr('ref'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="path/to/big/image1.jpg">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="path/to/big/image2.jpg">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="path/to/big/image3.jpg">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="path/to/big/image4.jpg">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="path/to/big/image5.jpg">
  </div>
</div>

Hide result

Answer 2

.data() , ...

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).data('img'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="https://dummyimage.com/600x400/000/fff" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="https://dummyimage.com/60x40/000/fff" alt="img1" class="img-thumbnail" data-img="https://dummyimage.com/600x400/000/fff">
    <img id="sm001" src="https://dummyimage.com/60x40/ff0/fff" alt="img2" class="img-thumbnail" data-img="https://dummyimage.com/600x400/ff0/fff">
    <img id="sm002" src="https://dummyimage.com/60x40/00f/fff" alt="img3" class="img-thumbnail" data-img="https://dummyimage.com/600x400/00f/fff">
    <img id="sm003" src="https://dummyimage.com/60x40/0ff/fff" alt="img4" class="img-thumbnail" data-img="https://dummyimage.com/600x400/0ff/fff">
    <img id="sm004" src="https://dummyimage.com/60x40/f00/fff" alt="img5" class="img-thumbnail" data-img="https://dummyimage.com/600x400/f00/fff">
  </div>
</div>

Hide result

Answer 3

.col-xs-6{
  height: 50vh;
}
.col-xs-6{
  background: url('http://joelbonetr.com/images/fwhee.png');
  background-size: cover;
}
.col-xs-6:hover{

height: 75vh;
background: url('http://joelbonetr.com/images/lightwheel.jpg');
background-size: cover;
}

    <div class="col-xs-6"></div>

Run codeHide result

I think this is what you asked for.