image demo hover start

image demo hover start.markdown

image demo hover start

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

<img src="http://www.redrocketmedia.com/des157/images/butterfly.png" height="151" width="305" alt="butterfly" id="img1" />
<img src="http://www.redrocketmedia.com/des157/images/butterfly.png" height="151" width="305" alt="butterfly" id="img2" />
<img src="http://www.redrocketmedia.com/des157/images/butterfly.png" height="151" width="305" alt="butterfly" id="img3" />

script.js

$(document).ready(function() {
  console.log("ready");

  //hover on butterfly img1
  $('#img1').hover(function() {
    //console.log("hover over img1");

    //change source to 'http://www.redrocketmedia.com/des157/images/butterfly_h.png'

    //change opacity to 1

  }, function() { //second function
    
    //reset the image to  'http://www.redrocketmedia.com/des157/images/butterfly.png'

    //change the opactiy back to .5

  });

  //hover on butterfly img2
  $('#img2').hover(function() {
    //console.log("hover over img2");
    
     //change source to 'http://www.redrocketmedia.com/des157/images/butterfly_h.png'

    //animate the opacity to 1
 
     
  }, function() { // second function
    //console.log("hover out img2");

   //animate the opacity to .5
    
    //change the image source to 'http://www.redrocketmedia.com/des157/images/butterfly.png'
  });

  //hover on butterfly img3
  $('#img3').hover(function() {
    //console.log("hover over");
    
    //console.log("hover over img3");
    
     //change source to 'http://www.redrocketmedia.com/des157/images/butterfly_hgif.gif'

    //animate the opacity to 1
 
     
  }, function() { // second function
    //console.log("hover out img3");

   //animate the opacity to .5
    
    //change the image source to 'http://www.redrocketmedia.com/des157/images/butterfly.png'
   
  });
  //close jQuery ready function	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
  overflow: hidden;
}

img {
  opacity: .5;
}

#img1,
#img2,
#img3 {
  position: relative;
}

#img1 {
  top: 1in;
}

#img2 {
  top: 3in;
}

#img3 {
  top: 4.5in;
}