Revealing text on hover image

Question

With my code, i am using a script that generates a random set of 4 images that gets displayed on refresh. I wish to only display the text when the cursor is hovering over the respective image.

Any pointers on doing this with CSS? I am not sure where to put the hover element. http://jsfiddle.net/sugarcraving/Af72K/1/

Javascript

$(document).ready(function() {
$(".champ").hide();

var elements = $(".champ");
var elementCount = elements.size();
var elementsToShow = 4;
var alreadyChoosen = ",";
var i = 0;
while (i < elementsToShow) {
    var rand = Math.floor(Math.random() * elementCount);
    if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
        alreadyChoosen += rand + ",";
        elements.eq(rand).show();
        ++i;
    }
}
});

CSS

div.champ { 
display: none; 
float: left;
color: red;
}

Answer 1

div.champ: hover{
    visibility: hidden;
}
div.champ: hover p{
    visibility: visible 
}

Where p is the element within your div that holds the text.

Hope this helps.

V/R

Answer 2

Following what Rouse02 said, add something around the context you want to hide/show.

<p>Celebi, the 251</p>

Then in your css, hide the content and only show it when you hover on the div (you could do it on the image hover as well).

p {
    visibility:hidden;
}
.champ:hover p {
    visibility:visible;
}

Demo: http://jsfiddle.net/bzTnR/1/

Answer 3

Maybe this could help! Let me know if this wasn't you were looking for

JsFiddle

I changed CSS to like this : div.text{display:none} div.champ:hover div.text{display:block}

Answer 4

i've updated your fiddle..here..try this

div.champ p{ visibility: hidden; }

div.champ:hover p{ visibility: visible; }

updated fiddle