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

이미지가 커지는 애니메이션 효과질문 입니다. 채택완료

붑후 3년 전 조회 2,052

홈페이지 메인인트로 이미지에 효과를 주려고 합니다.

자동으로 슬라이딩 되는부분은 만들었는데

이미지가 커지는 부분이 좀 어렵네요

정보를 검색해 보았지만 마우스 hover시에 작동되는 것만 있을뿐 hover없이 작동되는것은 찾을 수 없어서 질문 올립니다.

 

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

답변 3개

채택된 답변
+20 포인트

animation transition css 주시면 될것같아요!

animation

@keyframes test {

0% {transform: scale(1)}

100% {transform: scale(1.2);

}

 

transition: all 1.25s ease;

 

 

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

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

하틴
3년 전

</p>

<p><div class="image-box">

  <div class="image"></div>

</div>  </p>

<p> </p>

<p><style></p>

<p>.image-box{

  width:300px;

  overflow:hidden;

}

.image {

    width:300px;

  height:200px;

    background: url("<a href="https://picsum.photos/300/200/");" target="_blank" rel="noopener noreferrer">https://picsum.photos/300/200/");</a>

    background-position:center;

  -webkit-transition: all .5s ease;

  -moz-transition: all .5s ease;

  -ms-transition: all .5s ease;

  -o-transition: all .5s ease;

  transition: all .5s ease;

} 

.image:hover {  

  -webkit-transform: scale(1.2);

  -moz-transform: scale(1.2);

  -o-transform: scale(1.2);

  -ms-transform: scale(1.2); /* IE 9 */ 

  transform: scale(1.2);

} </p>

<p></style></p>

<p>

 

이게 이미지 확대하는 애니메이션인데

.image:hover {   여기에 hover을 빼면

이미지가 첨부터 확대되서 나옵니다 이런걸 찾으시나요?

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

답변에 대한 댓글 1개

붑후
3년 전
첨부터 확대가 아닌 천천히 확대가 되는 애니메이션을 찾고있습니다!
예를 들면 https://www.ilbaeumteo.net/ 이곳처럼입니다!

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

3년 전

css 선택자에서 :hover 부분을 빼고 쓰면 호버시가 아닌 일반상태에서 동작됩니다

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

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

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

로그인