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

Home Forums Other Image rollover using transparent .pngs

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
  • #34238

    I’d like to darken images on rollover using transparent .pngs. The images are links to individual pages. I don’t want to use any messy JavaScript, and would like the image rollover to be a little like the images found here:

    I presume this is done with transparent .pngs?

    The page I’d like to use this effect on is:

    Any suggestions?


    You could also do it with CSS only, using the background-position property on a :hover state. Or maybe with some opacity? I don’t exactly know, I’ve been without coding for a while.


    Something like this?


    @Paulie_D You could have the text appear like this:


    Looks cool, but is it possible to have it more snappy like on the initial link:

    And any help with how to apply it every image on:



    @pinandmountme Here you go:

    That’s as close as I can get you with pure CSS.

    Yeah agreed.


    Thanks so much. One last question: is it possible to apply the css to every image considering that they all have different dimensions?


    OK, thanks anyway…


    I have a question about his question. would it not be possible to place an image within a div, not as a background but using the img tag, then have the opacity of the image itself reduce to have the black background with the message leak through on hover and wouldn’t this work on all his images as long as he uses javascript to set the divs to the dimentions of the images (if there are tons of images) or else hard code the dimesions for the divs if there are just a few images. I know I should put a question mark in here somewhere but it got lost in my rambling.


    @furrball That is what I have done, but with anchors, divs aren’t needed at all.


    I think I’ve resolved this by using:

    img:hover {
    opacity: .35;

    and using a background colour:

    background-color: #000;

    for each div. The only probably is the background colour loads faster than the images. So, in some browsers, the page loads with black rectangles and squares first. Any other suggestions? And is it possible to make the images load faster or all at the same time? Or should I just resize all of the images to reduce their kB size?

    Let me know what you think:



    Certainly reduce the file sizes as much as you can, also, you can just set the dark background on hover, that way you don’t get the squares.


    I’ve done this:

    img:hover {
    opacity: .35;

    But it hasn’t worked – what am I doing wrong?!

    Thanks again


    No, it doesn’t work…

    Such sadness. Can anyone help?


    I’m a complete CSS novice. If you could explain the figure element and how to change the code for that, I’d greatly appreciate it.


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