CSS의 opacity 속성과 :hover 선택자를 함께 사용하면, 마우스를 이미지 위에 올렸을 때(마우스 오버) 불투명도를 아주 간단하게 변경할 수 있습니다. JavaScript 없이 순수 CSS만으로 구현되기 때문에 코드가 가볍고 성능에도 부담이 없습니다.
기본 원리
opacity 속성은 요소의 불투명도를 결정하며, 값의 범위는 0(완전히 투명)부터 1(완전히 불투명)까지입니다. :hover 선택자는 사용자가 해당 요소에 마우스 포인터를 올려놓는 순간 스타일을 적용해 줍니다. 여기에 transition 속성을 더하면 투명도가 급격히 바뀌지 않고 부드럽게 전환되는 자연스러운 효과를 만들 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.transparent{
width:270px;
height:200px;
opacity: 1;
transition: 0.3s;
}
.transparent:hover{
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
<h2>Hover over the above image to change its opacity</h2>
</body>
</html>코드 설명
- .transparent 클래스 — 이미지의 크기를 270×200px로 지정하고, 기본 불투명도를 1로 설정합니다.
- transition: 0.3s — 투명도 변화가 0.3초에 걸쳐 부드럽게 일어나도록 합니다.
- :hover { opacity: 0.3 } — 마우스를 올리면 이미지가 30% 불투명도로 서서히 흐려집니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 결과가 나타납니다. 이미지에 마우스를 올려보면 투명도가 부드럽게 변하는 것을 확인할 수 있습니다.
