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

Example 14 | Developer's Blog

With Background color Black

With Background Image

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
  • 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

    • 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.


  • hey

    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

  • 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,


  • 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

  • I’ve been reading it since yesterday, no results so far… Thanks. πŸ™‚

  • 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.