이글 내용에 있는 주소의 사이트 처럼...

이글 내용에 있는 주소의 사이트 처럼...

QA

이글 내용에 있는 주소의 사이트 처럼...

답변 2

본문

www.saxxunderwear.com

 

이 사이트처럼 이미지 위에 마우스를 올렸을때, 효과를 주고 싶습니다.

배경색이 바뀌고 글씨가 보여지는 것처럼...

이런 애니메이션 효과는 j쿼리 인가요? 

이 질문에 댓글 쓰기 :

답변 2

http://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=5925&sca=%EA%B0%A4%EB%9F%AC%EB%A6%AC 

 

http://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=6088&sca=%EA%B0%A4%EB%9F%AC%EB%A6%AC 

 

스킨이 업로드 되어있습니다. 보시고 참고하시면 될꺼같네요.

www.saxxunderwear.com 에 style.css 파일에 보면 아래와 같이 규정되어 있습니다.

이부분으로 제어되고 있습니다.

.collage .overlay {

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  background: transparent;

  -moz-transition: all 0.6s ease;

  -o-transition: all 0.6s ease;

  -webkit-transition: all 0.6s ease;

  transition: all 0.6s ease;

}

.collage .overlay h1 {

  color: #FFFFFF;

  font-size: 40px;

  padding: 8px;

  margin-bottom: 0;

  position: relative;

  -moz-transition: all 0.6s ease;

  -o-transition: all 0.6s ease;

  -webkit-transition: all 0.6s ease;

  transition: all 0.6s ease;

}

.collage .overlay p {

  font-family: "saxx-news", Verdana, Arial, sans-serif;

  color: #FFFFFF;

  font-size: 16px;

  padding: 0 35px;

  opacity: 0;

  text-align: center;

  transform: translateY(40px);

  -moz-transition: all 0.6s ease;

  -o-transition: all 0.6s ease;

  -webkit-transition: all 0.6s ease;

  transition: all 0.6s ease;

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 13
© SIRSOFT
현재 페이지 제일 처음으로