CSS Image rollover text

Question

I'm working on a personal site and I want to have images which on rollover. Get a low opacity fade over them and text revealed)

I have the faded opacity on rollover but I can't get text to appear.

Here is my code.

HTML

<li class="item i1">
     <a href="#">   
        <span>Vest &pound;18</span>
      </a>
</li><!-- end item -->

CSS

#featured ul li.item {
    height: 200px;
    width: 256px;
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#featured ul li.item a {
    color: #fff;
    width: 256px;
    height: 200px;
    display: block;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

#featured ul li.item a:hover {
    background: white;
    opacity: .70;
}

#featured ul li.item a span {
    display: none;
    width: 256px;
    height: 200px;
    font-size: 13px;
    color: red;
}

#featured ul li.item a span:hover {
    display: block;
}

.i1 {
    background: url('../img/1.jpg');
}

Am I missing something really obvious?

Answer 1

The span:hover won't trigger because it's set to display:none. Instead, target the span via a:hover:

#featured ul li.item a:hover span {
    display: block;
}

http://jsfiddle.net/nXxb6/