Forums

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
    Posts
  • #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:

    http://iwanttoseemymountains.tumblr.com/archive

    I presume this is done with transparent .pngs?

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

    http://www.davidwightman.net/paintings.html

    Any suggestions?

    #86574
    Bob
    Member

    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.

    #86577

    Something like this? http://jsfiddle.net/sl1dr/8mtRC/

    #86626

    @Paulie_D You could have the text appear like this: http://jsfiddle.net/sl1dr/g8GxE/

    #86654

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

    http://iwanttoseemymountains.tumblr.com/archive

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

    http://www.davidwightman.net/paintings.html

    Thanks!

    #86662

    @pinandmountme Here you go: http://jsfiddle.net/sl1dr/g8GxE/

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


    @Paulie_D
    Yeah agreed.

    #86684

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

    #86713

    OK, thanks anyway…

    #87008
    furrball1383
    Member

    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.

    #87009

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

    #87079

    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:

    davidwightman.net/paintings.html

    Thanks

    #87080

    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.

    #87087

    I’ve done this:

    img:hover {
    opacity: .35;
    background-color:#000;
    }

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

    Thanks again

    #87089

    No, it doesn’t work…

    Such sadness. Can anyone help?

    #87090

    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.

    Thanks

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