Forums

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

Home Forums CSS Image fade to Text

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #238905
    sweetlyevil
    Participant

    Hello!

    I’m trying to figure out how to create an image, that when hovered over, shows text underneath without fading out the picture completely (maybe .2-.4). When not hovered over, the img is at 1.0 opacity without any text being shown. For whatever reason, I cannot get the opacity with the picture under control.

    #238907
    Shikkediel
    Participant

    Maybe you could show the code…

    #239008
    Paulie_D
    Moderator

    What will be the determining factor as to size…the image or the text?

    Does the image need to be content or is just for styling?

    There’s a few ways to do this.

    #239020
    sweetlyevil
    Participant

    I’ve revised and changed it around so many times, the whole thing is a mess. I ended up deleting almost everything yesterday from anger.

    Basically, I have an image (720×495) and when hovered over, we want to show information about the picture, but not completely lose the picture (so as to use it for reference).

    I can make the image disappear to ONLY text and I can make the picture as the underneath of the text, but the opacity is wrong. Would there be an easier way to achieve this look without opacity involved?

    #239021
    Paulie_D
    Moderator

    Would there be an easier way to achieve this look without opacity involved?

    Nope, you obviously want opacity because you want the image to be see-through..although I’m doubtful that’s the ideal way to go here.

    Seems to me what you’re really after is somewhat to darken the image and show some information on top and there are many, many ways to do that…but perhaps I’m wrong.

    Regardless, you need to use positioning to either overlay the image on some content or overlay the content on the image…either way, positioning will be involved.

    So, as I asked before….

    What will be the determining factor as to sizeā€¦the image or the text?

    But for a quick and dirty option:

    http://codepen.io/Paulie-D/pen/eZzPBy

    I probably wouldn’t do it this way myself but the information we have is pretty vague.

    #239026
    sweetlyevil
    Participant

    YESSS. That absolutely works perfectly. Thank you so much!!

    Its basically being used to showcase projects we’ve worked on, so the image is the most important piece, as far as size. I’m sorry I wasn’t more clear before (my caffeine levels were dangerously low at the time).

    I think the display options were what kept giving my problems; I couldn’t get everything to line up correctly. This will also be an easy fix in order to change out images often on the website.

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