How to change Opacity with jQuery

Change the opacity of an element on MouseOver using jQuery

Build the HTML

First of all build the container. I’ll use an image to create the effect.

Wich will have a background image, hidden under the main image.

Add the JavaScript

Now let’s use the jQuery code:

You can change the opacity effect to a lower / higher levels.

Tha’s all. Check out the live Demo below or the full code.

Full Code


10 Responses to “How to change Opacity with jQuery”

  1. Nicole November 15, 2010 at 8:37 pm #

    hey Quicoto

    thank you for the post, It can be used in so many different ways. I will use it in my store.
    Will you write how to add “carousel” to a wordpress blog? I have searched for the right code for quite a while, found a few blogs that gave away many details but the code didn’t want to work, maybe it was designed for a different version of wordpress.

    and I have one question: do you know how to block the keywords ( from my website) from being viewed by others, on the Internet? for example through the source code page?

    thank you, best wishes

    • quicoto November 15, 2010 at 11:12 pm #

      Hi Nicole,

      Many questions 😛

      1) I can look for a carousel slideshow but won’t be easy. I hope I can find some time to write it 🙂

      2) “keywords”? You mean the meta keywords? Why do you wanna block it? Google is no longer using keywords.

      Thanks for commenting.


  2. Nicole November 16, 2010 at 1:58 pm #


    that’s fine with the carousel, if you are too busy, don’t worry
    yes, I meant the meta keywords:)
    how do you mean? Google is no longer using keywords? it is the way people find your site
    please explain

    Thanks, Nicole

    • quicoto November 16, 2010 at 2:54 pm #

      Yes, Matt Cutts from Google explained google is no longer using the meta keywords.

      They read all your content in order to show it to the user. They use title, url, metadescription and of course (like I said) the main content.


  3. Nicole November 16, 2010 at 6:23 pm #


  4. Andrea February 4, 2012 at 7:41 pm #

    Good afternoon,

    I’m a multimedia design student in ESAD, a portuguese college. I’ve been looking for something related to this…I’m finishing my portfolio but something’s missing…..I’m trying to change the colour of my text when scrolling, so that the central part of text turns black and the remaining text (upper, and below) stays grey. Can you help me? I think it can be done with jQuery, but I’m not used to working with jQuery, only PHP and HTML.
    Look forward to hear from you,


    • Rick February 4, 2012 at 7:46 pm #

      Hi Andrea,

      I’m afraid I don’t know how to change the colour text on “scroll”.

      Have you tried to look it up in the oficial documentation ?


  5. Andrea February 4, 2012 at 7:43 pm #

    The best way to explain what I want with this scrolling, is by accessing this website, which has pretty much the same thing, also with a cute effect.
    try scrolling to see how it looks like

  6. Andrea February 5, 2012 at 2:56 pm #

    I’ve been reading it since yesterday, no results so far… Thanks. 🙂

  7. Andrea February 5, 2012 at 5:03 pm #

    I’ve got it! a jquery doc in the wrong place…it finally works 😉 thank you

Leave a Reply

Add <code> Some Code </code> by using this tags.