Changing images on hover with CSS - css

Question

I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!

Answer 1

Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;