블로그스팟 클릭을 부르는 마법! 블로그 이미지에 생동감을 더하는 '호버 효과' 적용법

 

마우스를 올리면 반응하는 '이미지 호버 효과' 가이드

정적인 이미지는 자칫 지루함을 줄 수 있습니다. 하지만 마우스 커서를 올렸을 때 이미지가 부드럽게 움직인다면 독자의 흥미를 유발할 수 있죠. 코딩 한 줄로 내 블로그의 모든 이미지를 업그레이드해 보세요.

1단계: 이미지 호버 CSS 설정하기

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드 중 마음에 드는 스타일 하나를 골라 [CSS 추가] 칸에 붙여넣으세요. (전체 이미지에 자동 적용됩니다.)

/* 스타일 A: 부드럽게 확대되는 효과 (가장 추천!) */ .post-body img { transition: transform 0.3s ease-in-out; /* 🚩 변화 속도 조절 */ } .post-body img:hover { transform: scale(1.05); /* 🚩 확대 비율 (1.05는 5% 확대) */ z-index: 10; box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* 🚩 그림자 효과로 입체감 부여 */ } /* 스타일 B: 살짝 밝아지며 투명해지는 효과 */ .post-body img { transition: opacity 0.3s ease; } .post-body img:hover { opacity: 0.8; /* 🚩 투명도 (0.1 ~ 1.0 사이 조절) */ cursor: pointer; }

2단계: 내 입맛에 맞게 수치 조절하는 법

코드를 넣은 뒤 본인의 블로그 분위기에 맞춰 세부적인 느낌을 조정해 보세요.

💡 디자인 커스텀 팁
1. 속도 조절: 0.3s 부분을 0.5s로 바꾸면 더 천천히, 0.1s로 바꾸면 더 빠르게 반응합니다.
2. 확대 정도: scale(1.05)를 1.1로 바꾸면 더 크게 확대됩니다. 너무 크면 레이아웃이 깨질 수 있으니 주의하세요.
3. 둥근 모서리: border-radius: 10px;를 추가하면 이미지 모서리를 항상 부드럽게 유지할 수 있습니다.

3단계: 적용 결과 확인하기

CSS를 저장한 후 블로그 글의 이미지 위에 마우스를 올려보세요. 이미지가 움찔하며 반응한다면 성공입니다!

⚠️ 주의사항
- 모바일 확인: 모바일에서는 마우스 호버가 아닌 '터치'로 작동하므로, 확대 효과가 너무 크면 화면 밖으로 이미지가 나갈 수 있습니다.
- 이미지 링크: 링크가 걸린 이미지에 이 효과를 주면 클릭률이 비약적으로 상승합니다.

포스팅이 도움이 되셨다면 댓글로 의견을 나눠주세요!