Front-End/CSS
[CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover)
찐코딩
2021. 11. 10. 17:55
마우스 오버/hover
마우스 커서를 올렸을때(hover) effect를 주는 방법
지난 포스팅에서 다뤘던 opacity 속성과 함께 예문 작성)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.photo {
opacity: 0.5; /* 투명도 속성 - 반 투명도 */
}
/* 이미지에 마우스가 올라갔을 때 디자인 적용 */
.photo:hover {
opacity: 1;
}
</style>
</head>
<body>
<img class="photo" src="images/img.jpg" alt="튤립 이미지">
</body>
</html>
마우스 커서가 안 보이는데, 커서를 올릴 때마다 이미지가 변화되는 것을 볼 수 있다.