Help How to Make Text Appear on a Picture When You Hover?

[GoldenSlime]

The title literally says it all.

How do you make text appear on a picture when you hover over it with the mouse?

 

[Alteras]

you can make the picture a background-image of the div and have the hover class make the text turn from transparent to the color you want.

you can also stack a div with position absolute over the picture div and give that the hover class.

 

[Alteras]

so something like this

[class=picture] position: relative; display: inline-block; width: 500px; [/class] [class=text] position: absolute; width: 100%; height: 100%; top:0; left:0; opacity: 0; background-color: rgba(0,0,0,0.5); color: white; z-index: 2; [/class] [class name=text state=hover] opacity: 1; [/class] [div class=picture] [div class=text] Lorem ipsum [/div]

[/div]

 

[GoldenSlime]

you can make the picture a background-image of the div and have the hover class make the text turn from transparent to the color you want.

you can also stack a div with position absolute over the picture div and give that the hover class.

.....
I've never done BBCode+ before
.......I'm sorry I'm a moron. .-.

 

[Alteras]

.....
I've never done BBCode+ before
.......I'm sorry I'm a moron. .-.

it's fine. here are a few guides you can read to get yourself acquainted with it.
Tutorial - RpNation - BBCode+ Guide
Tutorial - A Beginner's Guide To Classes
Tutorial - A Guide to Animations using CSS Transitions and BBscript