CSS만으로 만드는 호버 이미지 전환 (로고 스왑)

마우스 호버 때 로고나 이미지가 바뀌는 효과를 사이트에 더하는 간단한 안내입니다. 웹 디자이너와 개발자를 위한 튜토리얼로, HTML과 CSS 코드 조각과 함께 단계별 설명을 담았습니다. 이 시각적 신호를 프로젝트에 자연스럽게 넣을 수 있고, 로고나 이미지에 포인트를 더해 더 몰입되는 경험을 만들기 좋습니다.

DEMO: 마우스 호버 시 로고/이미지 전환

HTML

<div class="swap">
	<a href="https://wedesignorange.com">
		<img class="main" src="YOUR-MAIN-IMAGE" />
		<img class="hover" src="YOUR-SWAPPING-IMAGE" />
	</a>
</div>

CSS

.swap { height: 200px; width: 200px; position: relative; }
.swap img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity .9s;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.swap img.hover, .swap:hover img.main { opacity:0; }
.swap img.hover:hover { opacity:1; }