Trying to show description text when you hover over a specific project image

Question

On https://dl.dropbox.com/u/4088146/seans/index.html , I am trying to reveal a description associated with a portfolio image when you hover over the image. I am trying to do this by setting the opacity to 1 when you hover over the image.

For some reason this is not working.

.description {
  display: block;
  opacity: 0;
  text-align: left;
  height: 130px;
  padding-top: 50px;
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
}
section img:hover ~ .description {opacity: 1;}

Answer 1

you need to have a sibling selector ~ , +

update

check this http://jsfiddle.net/btevfik/PAvDJ/

here is another example

http://jsfiddle.net/btevfik/nJSMg/

incase fiddles go crazy in the future

HTML

<div class="section">
<img src="http://placekitten.com/100/100" />
<div class="description">HELLO</div>
<img src="http://placekitten.com/100/100" />
<div class="description">WORLD</div>
</div>

CSS

.description {
opacity: 0;
}
img:hover + .description {
opacity:1;
}

Answer 2

The problem is there is no sibling of an IMG element to select.

What you have is:

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
  </a>
  <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
</div>

And you should have this:

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
    <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
   </a>      
</div>