SIR
목록으로
이전글 다음글

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

붑후
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,185
답변 3
목록

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

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

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

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

#그누보드5

답변 3개

채택된 답변
+20 포인트

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

animation

@keyframes test {

0% {transform: scale(1)}

100% {transform: scale(1.2);

}

transition: all 1.25s ease;

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

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

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개

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

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

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

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

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

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

로그인
🐛 버그신고