이전 목록 다음
채택완료

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

붑후
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2022-05-23 (월) 14:48:30 2,336

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

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

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

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

그누보드5
|

답변 3개 / 댓글 1개

채택된 답변
+20 포인트
이이름없음55
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2022-05-23 (월) 17:14:22

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

animation

@keyframes test {

0% {transform: scale(1)}

100% {transform: scale(1.2);

}

transition: all 1.25s ease;

하틴
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2022-05-23 (월) 16:16:02
Copy 
<div class="image-box">
  <div class="image"></div>
</div>  

 

<style>

.image-box{
  width:300px;
  overflow:hidden;
}
.image {
    width:300px;
  height:200px;
    background: url("https://picsum.photos/300/200/");
    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);
} 

</style>

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

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

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

답변에 대한 댓글 1개

붑후
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2022-05-23 (월) 16:21:23
첨부터 확대가 아닌 천천히 확대가 되는 애니메이션을 찾고있습니다!
예를 들면 https://www.ilbaeumteo.net/ 이곳처럼입니다!
볼볼피드
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2022-05-23 (월) 15:31:44

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

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