Вопрос по CSS. Не могу заставить менять цвет рамки при наведение

Так рамка у картинки или ссылки?

Если у ссылки то писать надо:

a.img_small {

border:13px solid #EBEBEB;

}

a.img_small:hover {

border:13px solid #333333;

}

Сделал так

.img_model_small {

border:13px solid #EBEBEB;

}

a.img_model_small {

border:13px solid #EBEBEB;

}

a.img_model_small:hover {

border:13px solid #333333;

}

Рамка меняет цвет, но теперь она не обводит картинку, а находиться под картинкой и показываться намного меньше самой картинки. Тобишь к картинке она не привязана.

Рамка у меня у картинки. Можно именно к картинке сделать. то что я хочу?

И ещё вопрос. Возможно ли через CSS накладывать эффекты каких-нибудь лёгких затемнений на картинку? Ну например, картинка слегка затёмнённая, а навёл и стала цветной. Или это только уже через яваскрипт?

Не к ссылке надо стиль применять, а к картинке:

a.img_model_small img {
border:13px solid #EBEBEB;
}
a.img_model_small:hover img {
border:13px solid #333333;
}

Ребят, чувствую что уже совсем близко к решению проблемы, но всё никак не врубаюсь. Признаю... дебил :)

Можете прописать всё чётко.

Вот что у меня в CSS

.img_model_small {

font-size:10px;

color:#333333;

font-weight:bold;

text-decoration:none;

padding:3px;

font-family:Arial, Helvetica, sans-serif;

}

a.img_model_small img {

border:13px solid #EBEBEB;

}

a.img_model_small:hover img {

border:13px solid #333333;

}

И вот, что в хтмл:

<tr>

<td class="img_model_small"><a href="#"><img src="images/demo_pic.jpg" width="105" height="105" border="0" /></a></td>

</tr>

Пропишите, плиз, что надо вписать в CSS, HTML

Заранее, огромное спасибо!

21gramm, просто надо хотя бы основы понять, а не пытаться копи-пастом что-то делать. К решению-то близко, но к пониманию работы css и связи классов с html - еще очень далеко, а такие проблемы будут появляться постоянно.

.img_model_small - применяется ко всем элементам с классом img_model_small

a.img_model_small img - применяется к изображениям, которые вложены в ссылку, у которой класс img_model_small

Соответственно, в html сейчас работает только первый общий класс, остальные - нет.

Если оставить неизменным css, то html должен выглядеть так (при этом, из css общий класс можно выкинуть, и вообще не использовать для таких разношерстных элементов какие-то общие классы):

<tr>

<td><a href="#" class="img_model_small"><img src="images/demo_pic.jpg" width="105" height="105" border="0" /></a></td>

</tr>

Если оставить нетронутым html, то css для него должен быть таким:

td.img_model_small a img {

border:13px solid #EBEBEB;

}

td.img_model_small a:hover img {

border:13px solid #333333;

}

DenIT, большое спасибо за помощь. Всё получилось. Буду учиться!

Не совсем затемнение, но попробуйте поиграться со свойством opacity (не работает в IE). Как вариант можно подгружать при наведении другой вариант изображения, например с помощью JavaScript.

а не проще сделать следующим образом?

При этом код будет таким:

Нафига там классы вообще городить то надо?

Если параметры для текста нужны, задайте точно так же

Вы внутрь одиночного тега img сможете запихнуть тег a? Ну-ну.

сорь ошибся

вот так