Как сделать что бы при наведении на картинку курсора, она увеличивалась?

голоса: +2

Здравствуйте. Я хочу добавить в правыё контейнер картинку, в уменьшенном размере, но сделать так что бы при наведении на неё курсором, она увеличивалась в несколько раз. Просто при наведении а не при клике на ней.

Подскажите как это сделать. Заранее благодарен.

Если можно, пожалуйста по подробнее.

Вот мой код одной из картинок
<!-- <block9> -->
<DIV class="box"><H3></H3><DIV class="boxContent"><!-- <bc> -->

<p align="center"><A target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/"></a><br />
<a target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/">
    <img src="http://school5kr.ucoz.ru/baner/1m.png"; title="Все о ГИА" width="200" height="300" border="0"/></a></p>
<!-- </bc> --></DIV>

<!-- </block9> -->

Адрес сайта http://school5kr.ucoz.ru/
| Автор: | Категория: Вопросы новичков
Редактирование | | Автор: Дмитрий Воробьёв

Ответов: 1

голоса: +2
 
Лучший ответ

Создаем блок внтурь которого помещаем див:

<div class="picters"><img src="ссылка на изображение" alt="описание к изображению"></div>

Далее добавляем в Таблицу стилей CSS:
.picters img {width:150px;}/*Фиксированный размер для изображения*/
.picters img:hover {width:250px;} /*Размер изображения при наведении*/
| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
А можно по точнее.
Вот мой код одной из картинок
<!-- <block9> -->
<DIV class="box"><H3></H3><DIV class="boxContent"><!-- <bc> -->

<p align="center"><A target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/"></a><br />
<a target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/">
    <img src="http://school5kr.ucoz.ru/baner/1m.png"; title="Все о ГИА" width="200" height="300" border="0"/></a></p>
<!-- </bc> --></DIV>

<!-- </block9> -->
Делаем вот так:
<!-- <block9> -->
<DIV class="box"><H3></H3><DIV class="boxContent"><!-- <bc> -->

<p align="center"><A target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/"></a><br />
<a target="_blank" href="http://www.ege.edu.ru/ru/organizers/infographics/">
<div class="picters">
 <img src="http://school5kr.ucoz.ru/baner/1m.png" alt="" title="Все о ГИА"></a></p></div>
<!-- </bc> --></DIV>

<!-- </block9> -->

Далее добавляем в Таблицу стилей CSS:
.picters img {width:200px;height:300px;}/*Фиксированный размер для изображения*/
.picters img:hover {width:350px;} /*Размер изображения при наведении*/
Всё получается. Спасибо огромное. Последний вопрос, а можно сделать так, что бы картинка при увеличении не уходила вправо, а выезжала на центр экрана.

Заранее, спасибо.
Здесь было бы более желательно сделать вот так - http://www.ucoz.ru/qa/index.php/1252 так как у вас сейчас это выход лишь для изображений в центральном контейнере, но не боковом.
Спасибо за комментарий. Но я чайник в HTML-кодах. Не могли бы Вы сказать какой код имено и куда вставлять. Просто управление образования, затребовало сделать всё баннеры о ЕГЭ читабельными, и завтра проверка сайтов. :(
...