Image fade to Text

[sweetlyevil]

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.

[Shikkediel]

Maybe you could show the code…

[Paulie_D]

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.

[sweetlyevil]

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?

[Paulie_D]

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.

[sweetlyevil]

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.

[Author]

Posts