티스토리 꾸미기 :: 본문 이미지 효과 주기

 
이번 시간은 본문 이미지에 효과를 주어 반응형 UI로 좀 더 잼있고 역동적인 포스팅을 꾸며보는 시간을 가져보겠습니다.
 

본문 이미지 효과 주기

✚

 
이미지에 그림자 효과나 모서리를 둥글게 테두리를 만들거나 혹은 마우스 오버 시 이미지 확대 효과 등 다양하게 활용해
 
볼 수 있습니다.
 

 

CSS 코드 적용

 
관리자 홈 > html 편집 > CSS 탭으로 들어가 맨 아래 부분에 다음 코드를 붙여 넣기 해줍니다.
 
 

마우스 오버 시 이미지 확대

 

 

/* 본문 이미지 이벤트 시작 */  
figure.imageblock img,
figure.imagegridblock img { 
    max-width: 100%; /* 이미지 크기(기본값) */ 
    border-radius: 10px; /* 모서리 둥글게 */
    border: 1px solid #bbb; /* 이미지 테두리 */
    transition: transform  0.3s ease; /* 마우스 오버시 애니메이션 속도 */
}
figure.imageblock img:hover,
figure.imagegridblock img:hover,
#article-view figure img:not([width]):hover {
    box-shadow: 0 3px 12px rgb(0 0 0 / 15%); /* 그림자 효과 */
    transform: scale(1.02); /* 마우스 오버시 이미지 크기 */
}
/* 본문 이미지 이벤트 끝 */

 

 

그림자 효과 

 

 

/* 본문 이미지 이벤트 시작 */  
figure.imageblock img,
figure.imagegridblock img { 
    max-width: 100%; /* 이미지 크기(기본값) */ 
    border-radius: 10px; /* 모서리 둥글게 */
    transition: transform  0.3s ease; /* 마우스 오버시 애니메이션 속도 */
}
figure.imageblock img:hover,
figure.imagegridblock img:hover,
#article-view figure img:not([width]):hover {
    transform: scale(1.02); /* 마우스 오버시 이미지 크기 */
}
/* 본문 이미지 이벤트 끝 */

 
 

마무리

이미지 효과를 통해 시각적으로도 잼있고 방문한 사용자의 체류시간을 늘릴수 있는 효과를 가져볼 수 있을 것 같습니다.
 

참고 사이트

 
https://galam.tistory.com/

티스토리 꾸미기 | 본문 이미지에 그림자 및 확대 효과 주기