Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

Transparent Image On Hover With jQuery

  • Posted on: 8 January 2011
  • By: admin

In this tutorial we will try to make the hover effect for the image that we used as link with jQuery. If we move our mouse pointer to the image, then the image will become transparent. And, if we move our mouse pointer out of the image, the transparent effect will be removed so the image will go back to its previous state.

The animate() Function

The function that we will use here is animate(). The animate() function itself has some paremeters such as:

.animate( properties, options )

properties : the CSS properties which will be the final state for the animation.
options : additional options such as:
  • duration
  • easing
  • complete
  • step
  • queue
  • specialEasing

In this example, we will use the duration option only. The duration option itself is used to define how long the time (in milliseconds) needed by the object to complete the transition from its initial state to its final state that defined by the properties parameter.

The complete reference about the animate() function can be read from http://api.jquery.com/animate/.


This is the simple animation effect that we will try to create.

save   cancel

This is the code.

<html lang="en">
<title>jQuery Animation</title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<!-- DIV containing the image link that will be given the animation effect -->
<div id="animated">
  <a href="javascript:void(0)">
    <img src="images/save.png" alt="save" border="0" />
  <a href="javascript:void(0)">
    <img src="images/cancel.png" alt="cancel" border="0" />
<script language="javascript">
  // Add the hover handler to the link
  $("#animated a").hover(
    function(){ // When mouse pointer is above the link
      // Make the image inside link to be transparent
    function(){ // When mouse pointer move out of the link
      // Return image to its previous state

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.