Красивое увеличение картинки при наведении
Нужно подготовить три файла ккартинку, HTML-файл и CSS-файл.
Создаем HTML-файл index.html с кодом:
<!DOCTYPE html><html dir="ltr" lang="ru-ru">
<head>
<title>Увеличение рисунка</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head><body>
<div class="img"><img src="/foto-1.png"></div>
</body></html>
Создаем CSS-файл style.css с кодом:
* {margin:0; padding:0;}
.img {border:1px solid #000; overflow:hidden; width:700px; margin:0 auto;}
.img img {
width:100%;
-webkit-transition:all 3s linear 0s;
-o-transition:all 3s linear 0s;
transition:all 3s linear 0s; display:block;
}
.img:hover img {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2)
}
Скачать changing-picture-html.rar архив примера можно здесь.
