Рамка навколо зображень робиться за допомогою властивості border, яка додається до селектора img. Щоб рамка з'являлася тільки при наведенні курсору миші на картинку, слід скористатися псевдокласом :hover, як показано на прикладі 1.
Приклад 1. Додавання рамки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка</title> <style> img:hover { border: 3px solid #65994C; /* Параметри рамки */
border-radius: 10px; /* Радіус заокруглення */
}
</style>
</head>
<body> <img src="image/3.png" alt=""> <img src="image/7.png" alt=""> <img src="image/ace.png" alt="">
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Зображення з рамкою
Властивість border впливає на загальні розміри зображення, через що при наведенні на картинку відбувається її зсув. Є кілька методів, як обійти цю особливість.
Використання outline
Властивість border замінюємо на властивість outline, яка має схожу поведінку, але не впливає на розміри (приклад 2).
Приклад 2. Властивість outline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка</title> <style> img:hover { outline: 3px solid #65994C; /* Параметри рамки */
}
</style>
</head>
<body> <img src="image/3.png" alt=""> <img src="image/7.png" alt=""> <img src="image/ace.png" alt="">
</body>
</html> Зверніть увагу, що outline завжди виводить прямокутну рамку, оскільки не підтримує border-radius.
Прозора рамка
Усунути зсув картинки допоможе прозора рамка тієї ж товщини, що вказана в border. Картинки попередньо виводимо з прозорою рамкою, а вже в :hover міняємо біля цієї рамки колір (приклад 3). Тоді при наведенні на зображення жодних зсувів не буде. Для прозорого кольору використовуємо значення transparent, а колір рамки змінюється за допомогою властивості border-color.
>Приклад 3. Прозора рамка
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка</title> <style> img { border: 3px solid transparent; /* Прозора рамка */
}
img:hover { border-color: #65994C; /* Колір рамки */
border-radius: 10px; }
</style>
</head>
<body> <img src="image/3.png" alt=""> <img src="image/7.png" alt=""> <img src="image/ace.png" alt="">
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Зображення з рамкою