티스토리 이미지 확대, 그림자 강조 효과 적용

마우스를 이미지에 가져다 댈 경우 이미지를 강조해 보려고 합니다.

좀 더 생동감 있는 블로그를 원하신다면 적용해 보세요.

 

이번 내용은 크게 어렵지 않아서 간단히 설명하고 결과를 보겠습니다.

 

목차

 

CSS 작성

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

html 편집을 클릭합니다.

 

그리고 CSS 탭으로 이동하여 작업을 해 보겠습니다.

 

다음 코드를 작성합니다. 어느 위치든 상관없습니다.

img:hover {
	transform: scale(1.03);
	box-shadow: 0.2em 0.15em 0.3em #999;
	transition: all 0.1s linear;
}

이미지에 마우스를 가져다 대면 크기를 약간 확대하고 그림자 효과를 적절히 주었습니다. 원하시는 만큼 조절하시면 됩니다. 부드럽게 보이도록 애니메이션 효과도 주었습니다.

 

 

결과 보기

다음과 같이 마우스를 가져다 대면 이미지가 약간 확대 되면서 그림자가 생기게 됩니다.

 

영상으로도 확인해 보겠습니다.

 

리스트의 썸네일 이미지에 적용된 화면입니다.

 

본문의 이미지에 적용된 화면입니다.

 

댓글의 프로필 이미지에 적용된 화면입니다.

 

유용하게 사용하시기 바랍니다.

감사합니다.