이미지 에니메이션 효과(transform) 주기

demun
퍼블리셔/css
2010. 10. 9. 08:45

며칠전에 이미지에 그림자 효과를 주었습니다. 글을 작성하고도 시간이 없어 발행을 못하네요^^

그런데 더 지나 좋은 효과를 봐서 따라해 봤습니다.

마우스를 갖다대면 이미지가 커지는 형식이죠. 제블로그에서 이미지에 마우스를 갖다 대어보세요. 어떤 효과가 나는지???

아무런 효과가 나타나지 않는다면 당신은 익스플로러???

크롬이나 오페라, 사파리는 정상작동합니다.

각 브라우져마다 어떻게 보여지는지 동영상으로 담아봤습니다.

이미지가 흐려서 안보이시면 원본을 보세요. 여기입니다.

어떤가요 재대로 보이시나요?

예제로 이미지를 하나 삽입해보겠습니다. 마우스를 갖다 대어보세요.

현재 탈렌트 김지수씨가 뺑소니 혐의로 실시간 검색어 순위에 올랐군요. 그래서 김지수 사진을 한장 올려보겠습니다.

마우스를 올려보세요.

이미지가 팝업되나요?

현재 크롬,파이어폭스,사파리,오페라는 정상작동하는데 익스플로러는 IE 전용 Matrix Filter를 이용해야합니다. 근데 이것이 좀체 어려워서.....

저도 어떻게 적용하는지는 완벽이는 모릅니다.

우선 티스토리 블로그에 적용하려면 아래처럼 하면 됩니다.

블로그 본문에 해당하는 .article에 적용하는겁니다.

.article 안에 이미지에 해당하니 img 를 붙여적용하면 됩니다.

즉 .article img 에 효과를주고 마우스를 갖다대는것은 .article img:hover 에 효과를 주면 됩니다.

코드는 아래와 같습니다.

.article img {
  -webkit-box-shadow:5px 5px 7px #333;
  -moz-box-shadow:5px 5px 7px #333;
  -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
  -moz-transform:scale(0.8); /*Mozilla scale version*/
  -o-transform:scale(0.8); /*Opera scale version*/
  -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
  -moz-transition-duration: 0.5s; /*Mozilla duration version*/
  -o-transition-duration: 0.5s; /*Opera duration version*/
  opacity: 0.7; /*initial opacity of images*/
  margin: 0 10px 5px 0; /*margin between images*/
}
.article img:hover {
  -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
  -moz-transform:scale(1.1); /*Mozilla scale version*/
  -o-transform:scale(1.1); /*Opera scale version*/
  box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
  -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
  -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
  opacity: 1;
  margin:10px 0;
}

대략 이 코드를 복사해서 사용해도 됩니다.

단 익스플로러는 적용하려면 여기를 참고하세요.

좀더 자세한 글은 여기를 참고하세요.

개 개

demun(대문블로그)

이미지 에니메이션 효과(transform) 주기

티스토리툴바