Image Fade Button (using CSS3)

1. Add script tags in side open and closing head tags

<script src="jquery.js" type="text/javascript"></script>


    <script type="text/javascript">

    <!--

   // when the DOM is ready:

$(document).ready(function () {

  // find the div.fade elements and hook the hover event

  $('div.fade').hover(function() {

    // on hovering over, find the element we want to fade *up*

    var fade = $('> div', this);

   

    // if the element is currently being animated (to a fadeOut)...

    if (fade.is(':animated')) {

      // ...take it's current opacity back up to 1

      fade.stop().fadeTo(250, 1);

    } else {

      // fade in quickly

      fade.fadeIn(1000);

    }

  }, function () {

    // on hovering out, fade the element out

    var fade = $('> div', this);

    if (fade.is(':animated')) {

      fade.stop().fadeTo(3000, 0);

    } else {

      // fade away slowly

      fade.fadeOut(1000);

    }

  });

});

    //-->

    </script>

   

2. Add code snippet below between open and closing body tags

<!--div needs class name of fade, and any unique id -->
    <div class="fade" id="fade1">
    <!--step 4, add anchor tag if image will be a link -->
    <a href="http://rachelfujita.com" target="_blank">
           <!--step 3, add original image src and your image width -->
         <img src="images/image_1b.jpg"  width="200"/>
        </a>
        <!--step 5, add another div, then next hover image src and width value, and add anchor if img is used as link -->
     <div>
     <a href="http://rachelfujita.com" target="_blank"><img src="images/image_1.jpg" width="200"/></a>
     </div>
    </div>

3. Add the following (required) css rules

/*get rid of link borders in IE*/

img{

     border:0px; 

}


/*CSS to position first image, top and left should be unique numbers*/

#fade1 {

 position: absolute;

 top: 100px;

 left: 320px;

}



/*CSS to position second image, top and left should be unique numbers*/

#fade2 {

 position: absolute;

 top: 100px;

 left: 100px;

}



/*CSS to position third image, top and left should be unique numbers*/

#fade3 {

 position: absolute;

 top: 100px;

 left:540px;

}



/*To overlap before and after image in same place*/

.fade div {

  position: absolute;

  top: 0;

  left: 0;

  display: none;

}