테스트 사이트 - 개발 중인 베타 버전입니다

이글 내용에 있는 주소의 사이트 처럼... 채택완료

따라하기 10년 전 조회 5,132

http://www.saxxunderwear.com">www.saxxunderwear.com

 

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

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

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

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

http://www.saxxunderwear.com/" style="color: rgb(0, 0, 0); font-family: 돋움, Dotum, sans-serif; font-size: 14.003999710083px; line-height: 25.2071990966797px;">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;

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인