Изменение изображений при наведении с помощью CSS

Question

Я не могу понять это. Я хочу иметь систему, при которой изображение будет меняться на другое изображение при наведении курсора.

В моем HTML у меня есть:

<div class="linkyimage"> 
<img src="image/red.png" alt="red" /> 
    <p class="hovvery"<img src="image/black.png"></p> 
</div> 

И тогда в моем 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; 
} 

Однако ничто не кажется, происходит для меня. Где я иду не так?

редактировать:

До сих пор не могу показаться, чтобы получить какой-либо эффект .....

.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; 
    } 

и 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> 

Я буду для своего рода галереи изображений, которые на мыши переходят на черный образ - в futuer я сделаю так, чтобы описание изображения появилось над ним, но на данный момент пытаемся получить основы!

Answer 1

Working FIDDLE Demo

Вы не закрывал p в этой строке:

<p class="hovvery"<img src="image/black.png"></p> 

Правильный код:

<div class="linkyimage"> 
    <img src="image/red.png" alt="red" /> 
    <p class="hovvery"><img src="image/black.png" /></p> 
</div> 

Также у Вас есть ошибка синтаксиса в вашем CSS здесь:

width:250px: /* it must be semicolon ; at the end */ 

Изменить его к этому:

width: 250px;