이미지 마우스 오버 했을 때 확대되는 효과와 그림자 넣기

 

 

 

 

1) 변경 사유

코드블럭 변경하는 글을 올리면서 다시 한번 살펴보니 글을 캡쳐한 부분은 내가 캡쳐한 이미지인지 직접 텍스트로 작성한건지 구분이 되지 않았다. 이미지를 업로드 한다면 코드캡쳐 공식문서 캡쳐 등 텍스트 캡쳐가 주가 될 것이기 때문에 이 부분에 구분을 확실히 지어주고 싶었다. 

전부 내가 작성한 것처럼 보이는 현재

 

 

 

 

 

 

2) 변경 방법

너무 간단한데 현재 사용중인 스킨의 이미지 영역이 어디인지 확인 후 아래 코드를 붙여 넣어주면 된다.

img태그 전체에 넣어주면 절대 안된다. 콘텐츠 영역에 들어가는 Img에 넣어줘야 본문 영역에 포함된 img에만 해당 효과들을 적용 할 수 있다.

내가 쓰고 있는 hELLO 스킨의 경우 아래 코드에다가 추가 해주면 된다.

나는 이미지에 그림자를 넣음과 동시에 마우스 오버 했을 때 확대되는 효과까지 같이 넣었다.

#content .contents_style figure.imageblock span img,
#content .contents_style figure.imageblock a img,
#content .contents_style figure.imagegridblock span img,
#content .contents_style figure.imagegridblock a img {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 100%;
  width: 100%;
  
  /** 추가한 코드 **/
  box-shadow: 0 10px 18px rgb(0 0 0 / 20%) !important; 
  transition-duration: 0.3s;
  border-radius: 10px;
}

일단 그림자는 통일성을 위해 코드블록에서 썼던 수치 그대로 적용했다.

또 마우스 오버로 이미지 확대되는 효과를 적용했는데 트렌지션 효과도 같이 넣어서 확대 축소가 부드러워 보이게 했다.

테두리 라운드 효과도 코드블록과 통일성을 주기위해 추가했다.

 

 

#content .contents_style figure.imageblock span img:hover,
#content .contents_style figure.imageblock a img:hover,
#content .contents_style figure.imagegridblock span img:hover,
#content .contents_style figure.imagegridblock a img:hover{
  transform: scale(1.02); 
  transition-duration: 0.3s;
}

이미지 마우스오버는 아래와 같이 작성하여 추가해줬다.

얼마나 커질지는 직접 소수점 자리 하나하나 넣어가보면서 내가 원하는 크기로 맞췄다.

 

 

 

 

 

 

변경 전 모습과 적용된 모습