How to change an image source on hover?

Question

I want to change image source using jQuery but with animation.

I have a default straight looking image. I have 5 different images with a head looking at different directions. on hover of a particular section, I want to change the image to that particular image src value.

If no div is hovered, the default straight looking image should appear.

I have achieved it but the images should change with an animation. My animations are flickering.

Can someone point me in the right direction?

$('#thumbs img').hover(function(event) {

  $(this).fadeOut(100, function() {
    var thisSRC = $(this).attr('src');
    $('#main').attr('src', thisSRC);
  }).fadeIn(100);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbs">
  <img src="https://i.ibb.co/rxX8VMq/left.png" width="50" height="50">
  <img src="https://i.ibb.co/r77CrCC/topleft.png" width="50" height="50">
  <img src="https://i.ibb.co/CzRdRtp/top.png" width="50" height="50">
  <img src="https://i.ibb.co/L8cSs3p/topright.png" width="50" height="50">
  <img src="https://i.ibb.co/D1cjqfD/right.png" width="50" height="50">
</div>

<img id="main" src="https://i.ibb.co/3dMWhqV/default-head.png">

jsfiddle

100 is 100 milliseconds, which is an extremely short period of time. If you want a more gradual fadeOut/fadeIn, increase that duration — Taplar, Jun 13 '19 at 18:21
You'll probably want to `.finish()` the queued animation before starting another. Currently if you hover over a bunch, it's going to start triggering animations in weird orders etc. — Tyler Roper, Jun 13 '19 at 18:23
@Taplar I know the duration is short but the animation is not as desired. may be the function I am using is not correct. — Mohammed Wahed Khan, Jun 13 '19 at 18:23
@Taplar I need the animation to be smoother. even if I change it to 500 its not being smoother. — Mohammed Wahed Khan, Jun 13 '19 at 18:24
I see multiple issues, and like Taplar, I don't know which one you're trying to address. Your `hover` should probably be `mouseenter`. You should use `.finish()` to complete previous actions before starting new ones. — Tyler Roper, Jun 13 '19 at 18:25
Are you trying to animate the thumbnails or the main image...? — Tyler Roper, Jun 13 '19 at 18:31
The main image currently isn't animating *at all*. Your current code animates the thumbnails, which is why when you say "I want the animation to be smoother", there is confusion. Janos's answer below addresses this. — Tyler Roper, Jun 13 '19 at 18:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194905/discussion-between-mohammed-wahed-khan-and-tyler-roper). — Mohammed Wahed Khan, Jun 13 '19 at 18:34

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Given the fact you are using the full-size images already, then a CSS-only solution could be used, since no additional bandwidth is needed to load the large pictures:

CSS-only:

.thumb{ 
  width: 50px; 
  display: inline-block;
}

.thumb:hover  ~ .big .default{ opacity:0; }


.thumb:nth-child(1):hover ~ .big > img:nth-child(1){ z-index:5; opacity:1; }
.thumb:nth-child(2):hover ~ .big > img:nth-child(2){ z-index:5; opacity:1; }
.thumb:nth-child(3):hover ~ .big > img:nth-child(3){ z-index:5; opacity:1; }
.thumb:nth-child(4):hover ~ .big > img:nth-child(4){ z-index:5; opacity:1; }
.thumb:nth-child(5):hover ~ .big > img:nth-child(5){ z-index:5; opacity:1; }

.big{ position:relative; } 
.big img{ 
  position:absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .2s .1s ease-out;
}

.big .default{ opacity:1; }

<img src="https://i.ibb.co/rxX8VMq/left.png" class='thumb'>
<img src="https://i.ibb.co/r77CrCC/topleft.png" class='thumb'>
<img src="https://i.ibb.co/CzRdRtp/top.png" class='thumb'>
<img src="https://i.ibb.co/L8cSs3p/topright.png" class='thumb'>
<img src="https://i.ibb.co/D1cjqfD/right.png" class='thumb'>

<div class='big'>
  <img src="https://i.ibb.co/rxX8VMq/left.png">
  <img src="https://i.ibb.co/r77CrCC/topleft.png">
  <img src="https://i.ibb.co/CzRdRtp/top.png" class='default'>
  <img src="https://i.ibb.co/L8cSs3p/topright.png">
  <img src="https://i.ibb.co/D1cjqfD/right.png">
</div>

It's much easier to generate the above CSS using pre-processors (like SCSS)

hasan05 · Answer 2 · 2019-06-13T19:09:05.990

1

  $('#thumbs img').hover(function(event){
   $('#thumbs img').finish();    
        var thisSRC=$(this).attr('src');
        $('#main').fadeTo(500, 0.5);
        $('#main').finish();
        $('#main').fadeTo(500, 1).attr('src',thisSRC);        
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbs">
  <img src="https://i.ibb.co/rxX8VMq/left.png" width="50" height="50">
  <img src="https://i.ibb.co/r77CrCC/topleft.png" width="50" height="50">
  <img src="https://i.ibb.co/CzRdRtp/top.png" width="50" height="50">
  <img src="https://i.ibb.co/L8cSs3p/topright.png" width="50" height="50">
  <img src="https://i.ibb.co/D1cjqfD/right.png" width="50" height="50">
</div>

<img id="main" src="https://i.ibb.co/3dMWhqV/default-head.png">

edited Jun 13 '19 at 19:09

answered Jun 13 '19 at 18:25

hasan05

904
5
22

even now the images are flickering on hover. – Mohammed Wahed Khan Jun 13 '19 at 18:26
Its because, all hover cast by time. – hasan05 Jun 13 '19 at 18:27
https://codepen.io/Merajkhan/pen/dBPZZP this is my desired output but with images – Mohammed Wahed Khan Jun 13 '19 at 18:42
I dont think so, you could do this only jpg or png file. :( – hasan05 Jun 13 '19 at 18:46
can you suggest me how can I do it? should I create svg's for that? – Mohammed Wahed Khan Jun 13 '19 at 18:48
I am so impressed on my last update. have a look. If you think its getting closer to your output. then let me know, any changes. :) – hasan05 Jun 13 '19 at 19:04

Taplar · Answer 3 · 2019-06-13T18:55:25.377

1

Ok so this is a modified version that animates the main, not any of the thumbnails.

On hover the thumbnail gets a class of active
- The main image is faded out
- The main is replaced with the src of the thumbnail
- The main is faded in
On hover end, remove the class active from the thumbnail
- Start a timeout of 300 milliseconds
  - If no thumbnail is active after 300 milliseconds, revert the main back to the default image

var $thumbnails = $('#thumbs img');
var $main = $('#main');

$main.data('originalSrc', $main.attr('src'));

$thumbnails.on('mouseenter', function(e){
  e.target.classList.add('active');
  
  $main.finish().fadeOut(500, function(){
    $main.attr('src', e.target.getAttribute('src'));
    $main.fadeIn(500);
  });
});

$thumbnails.on('mouseleave', function(e){
  e.target.classList.remove('active');
  
  setTimeout(function(){
    if ($thumbnails.filter('.active').length < 1) {
      $main.prop('src', $main.data('originalSrc'));
    }
  }, 200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbs">
  <img src="https://i.ibb.co/rxX8VMq/left.png" width="50" height="50">
  <img src="https://i.ibb.co/r77CrCC/topleft.png" width="50" height="50">
  <img src="https://i.ibb.co/CzRdRtp/top.png" width="50" height="50">
  <img src="https://i.ibb.co/L8cSs3p/topright.png" width="50" height="50">
  <img src="https://i.ibb.co/D1cjqfD/right.png" width="50" height="50">
</div>

<img id="main" src="https://i.ibb.co/3dMWhqV/default-head.png">

edited Jun 13 '19 at 18:55

answered Jun 13 '19 at 18:27

Taplar

24,788
4
22
35

can we change the jquery whatever I'm using like the fadeout and fade in to animate. – Mohammed Wahed Khan Jun 13 '19 at 18:28
What animation are you after? @MohammedWahedKhan – Taplar Jun 13 '19 at 18:29
@Taplar After a bit of clarification in the comments, it sounds like the main image itself is supposed to be animated as opposed to the thumbnails. – Tyler Roper Jun 13 '19 at 18:42
@TylerRoper https://codepen.io/Merajkhan/pen/dBPZZP this is the desired output but using images – Mohammed Wahed Khan Jun 13 '19 at 18:44
@MohammedWahedKhan I've modified the answer to animate only the main image, and it also restores it once all thumbnails are not hovered. – Taplar Jun 13 '19 at 18:56
@Taplar can you look at the codepen link I have commented and give some suggestions on how to achieve it. I'll try my best. – Mohammed Wahed Khan Jun 13 '19 at 19:01
That codepen has an animation related to mousemove on the page, not on hovering images. That example and what you are asking for in your question are completely different – Taplar Jun 13 '19 at 19:02

score 0 · Answer 4 · edited Jun 13 '19 at 18:32

You should fadeOut first and when it's finished, change the source and do a fadeIn in the finished callback.

$('#thumbs img').hover(function(event) {
  var thisSRC = $(this).attr('src');
  $('#main').fadeOut(300, function() {
    $('#main').attr('src', thisSRC);
    $('#main').fadeIn(300)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbs">
  <img src="https://i.ibb.co/rxX8VMq/left.png" width="50" height="50">
  <img src="https://i.ibb.co/r77CrCC/topleft.png" width="50" height="50">
  <img src="https://i.ibb.co/CzRdRtp/top.png" width="50" height="50">
  <img src="https://i.ibb.co/L8cSs3p/topright.png" width="50" height="50">
  <img src="https://i.ibb.co/D1cjqfD/right.png" width="50" height="50">
</div>

<img id="main" src="https://i.ibb.co/3dMWhqV/default-head.png">

How to change an image source on hover?

4 Answers4

CSS-only:

Linked