이 사이트처럼 이미지 위에 마우스를 올렸을때, 효과를 주고 싶습니다.
배경색이 바뀌고 글씨가 보여지는 것처럼...
이런 애니메이션 효과는 j쿼리 인가요?
답변 2개
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;
}
답변을 작성하려면 로그인이 필요합니다.