How to cause image to fade with hover and show text?

Question

Only HTML/CSS solutions please

I'm working on an online art portfolio. On each page are a number of paintings, organized vertically. Pretty simple.

However, when the cursor hovers over each painting, I want some text to show, either causing the painting to fade a little bit, or the text can appear in a small text box that follows the cursor.

I would post the code I have now, but after much trial and error, I've stripped it back down to simply a div with the img inside of it.

Answer 1

You'll want to do some selector magic. See attached snippet and CodePen.

Next time, please post some of your attempted solutions. No one wants to just write your code for you.

img.fade:hover /* fade out on hover */ {
  opacity:0.5;
}
img.fade + span /* hide spans immediately after images that are set to fade */ {
  visibility:hidden;
}
img.fade:hover + span /* display spans immediately after :hover faded images */ {
  visibility: visible;
}

<img class="fade" src="http://41.media.tumblr.com/d4473a971038c392b3e4ecb42e013784/tumblr_nlyfpjetVZ1tdg8rso7_500.jpg">
<span>Here is some Text</span>

See CodePen http://codepen.io/anon/pen/PPPqvM