Question

Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).

I already implemented the img-darken part this way – http://jsfiddle.net/4Dfpm/.

What is a good way to implement the “expose text on hover(the same hover)” part?
Can it be done only with CSS, or I’ll need to use a script this time ?

Thanks.

** How the img-darken part already implemented:

​

a.darken {
    background: black;
}

a.darken img {
    display: block;
    transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}

Answer 1

CSS Solution

Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/

I have added < span > inside < a > tag with class=darken

<span>text</span>

And updated css is

a.darken{
...;
position:relative;
...
}

new css added is

a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}