Title: Logo Hover effect
Last modified: August 21, 2016

---

# Logo Hover effect

 *  Resolved [Alex H.](https://wordpress.org/support/users/alex-h-1/)
 * (@alex-h-1)
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/)
 * Hey guys,
 * I’m trying to add a jQuery hover affect to my logo on my website, so when you
   hover over it you get that faded effect.
 * Here’s my site [http://www.voltfuse.com/test](http://www.voltfuse.com/test)
 * Does anyone know which code I should use? Is there a plugin?
 * Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720739)
 * The jQuery would be:
 *     ```
       jQuery("#logo img").hover(
        function($) {
         $(this).fadeTo("slow", 0.33);
        },
        function($) {
         $(this).fadeTo("slow", 1);
        }
       );
       ```
   
 * See [http://codex.wordpress.org/Using_Javascript](http://codex.wordpress.org/Using_Javascript)
   
   and [http://codex.wordpress.org/Function_Reference/wp_enqueue_script](http://codex.wordpress.org/Function_Reference/wp_enqueue_script)
   You’d need to enqueue it.
 *  Thread Starter [Alex H.](https://wordpress.org/support/users/alex-h-1/)
 * (@alex-h-1)
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720744)
 * Where do I add that jQuery code to?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720747)
 * Contact your theme’s vendors. We have no access to commercial themes so we can’t
   tell you that.
 *  [astoshka](https://wordpress.org/support/users/astoshka/)
 * (@astoshka)
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720754)
 * You can do this with CSS. Add
 *     ```
       #logo a:hover img {
            opacity: 0.3;
       }
       ```
   
 * If you want smoother animation, you can use CSS [transitions](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions).
 *  Thread Starter [Alex H.](https://wordpress.org/support/users/alex-h-1/)
 * (@alex-h-1)
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720762)
 * Hey I’ve added that to my css in my header, and nothing changed 🙁
 *  [astoshka](https://wordpress.org/support/users/astoshka/)
 * (@astoshka)
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720790)
 * I tried to edit your CSS live in FireBug and it works. Maybe you are doing it
   wrong. Try to edit this rule to the theme’s custom.css file.
 *  Thread Starter [Alex H.](https://wordpress.org/support/users/alex-h-1/)
 * (@alex-h-1)
 * [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720795)
 * Okay great I got it to work. What code would I have to add to it to make it slide
   nice and easy?

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Logo Hover effect’ is closed to new replies.

 * 7 replies
 * 3 participants
 * Last reply from: [Alex H.](https://wordpress.org/support/users/alex-h-1/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/logo-hover-effect/#post-3720795)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics