Image change on hover from a stitched image

Question

I have a image that is created to have 4 images in one See this image

Now, what I am trying to do is get the css to load just the first square at the top. Then when a user hovers over that image it will switch between all four images.

So it will display black on load, then when a user hovers over it, the image changes to red, then blue, then green, then back to black. It then repeats over and over until the mouse is moved off the image area.

I know that I can do this by converting the png to a gif but the image is generated outside of my control so this method is needed. If anyone can help I will be forever grateful.

Cheers.

You can add some code of what you already tried? – mwil.me Jun 25 '17 at 01:06 — mwil.me, Jun 25 '17 at 01:06

score 0 · Accepted Answer · answered Jun 25 '17 at 08:48

You should use CSS sprites and to make the change happend when over use setInterval function to change position ( here the height of each block of your image mesures 300px , so we incerement by +300 ) every defined interval time ,

Below snippet I've used .hover() jquery function to set and clear annimation .

var interval;
$(function(){
  $("#image").hover( 
      function() {
        var bottom = 0;
        $this = $(this);
        interval = setInterval(function() {
          
          bottom >= 900  ? bottom = 0 : bottom+=300;
          
          $this.css({'background-position' : '0px -'+bottom+'px'});
        } , 1000)
        
      }, 
      function(){
       $this.css({'background-position' : '0 0'})
        clearInterval(interval);
      }
  );
});

#image {
  width:150px;
  height:150px;
  background: url('https://i.stack.imgur.com/h8h14.png') 0 0px;
}

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

Image change on hover from a stitched image

1 Answers1