웹 페이지에서 이미지에 마우스 커서를 올렸을 때(호버) 그림자 효과를 표시하고 싶다면 CSS의 box-shadow 속성과 :hover 가상 클래스를 함께 사용하면 됩니다.
box-shadow 속성은 요소 주위에 하나 이상의 그림자를 추가할 수 있게 해주며, 기본 문법은 다음과 같습니다.
box-shadow: offset-x offset-y blur-radius spread-radius color;
각 값은 순서대로 수평 오프셋, 수직 오프셋, 흐림 반경(blur), 확산 반경(spread), 그림자 색상을 의미합니다. 위 예제에서 사용된 0 0 2px 2px blue는 오프셋 없이 흐림과 확산을 2px씩 적용한 파란색 그림자를 의미합니다.
예제 코드
아래 예제에서는 이미지에 주황색 테두리와 둥근 모서리를 기본 스타일로 지정하고, 마우스를 올렸을 때 파란색 그림자가 나타나도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 2px solid orange;
border-radius: 3px;
padding: 7px;
}
img:hover {
box-shadow: 0 0 2px 2px blue;
}
</style>
</head>
<body>
<img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>코드 설명
img 선택자: 모든 이미지에 2px 두께의 주황색 실선 테두리, 3px의 둥근 모서리(border-radius), 그리고 7px의 안쪽 여백(padding)을 적용합니다.
img:hover 선택자: 사용자가 이미지 위에 마우스 커서를 올리는 순간 파란색 그림자가 표시됩니다. 커서가 이미지에서 벗어나면 그림자는 자동으로 사라집니다.
이처럼 :hover 가상 클래스를 활용하면 별도의 JavaScript 없이도 순수 CSS만으로 간단하고 부드러운 인터랙션 효과를 구현할 수 있습니다. 그림자 색상이나 크기를 조절해 다양한 스타일의 호버 효과를 만들어 보세요.