The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript 'fade in on hover' effect

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #176825
    Black Mamba

    I’m trying to create a simple fade in on hover effect.

    The black bars with the text should be invisible by default and slowly fade in once you hover over the image.

    I’ve searched and tried a few different methods, but haven’t quite made it work yet.

    This is my current situation: JSFiddle

    It’s working but here’s a glitch. When you hover your mouse over the black bars they fade in ‘n’ out continually… that shouldn’t happen, the image is behind the black bars, meaning you’re still hovering over it, therefore the black bars should stay on all the time.

    Can somebody help me fix this glitch?
    Any help will be highly appreciated. Thanks.


    It’s working for me right now anyway… which are you seeing the glitch in?


    The function fires (or seems to) every time you move the cursor when it’s over the black bars.

    Perhaps mouseenter / mouseleave might be better?

    Or…even better…this –

    Black Mamba

    Brilliant Paulie_D!
    The JS from that JSFiddle works perfectly.
    Thanks a lot.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.