css 질문입니다.

css 질문입니다.

QA

css 질문입니다.

본문

2041214237_1572927831.4234.png

1번위에 커서를 올리면 2번이 내려가는 효과인데영  슬라이드 되면서 3번도 내려가고

3번도 커서올리면 아래 다른 슬라이드(4번)가 내려가야되요

그래서 구조가 

---------------------

1(호버시 2번이 내려감)

2

3 (2번이 밀리면서 아래로 내려감)

4

이렇게 만들고싶은데 어딜만져야될지 모르겠네요ㅠ

--------------------------------------------

 

코드는

 


<style>
.container {
  position: relative;
  width: 50%;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.container:hover .overlay {
  bottom: 0;
  height: 100%;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
1번
<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
2번
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
3번
 <div class="container">
  <img src="img_avatar.png" alt="Avatar" >
</div>
</div>

 이러합니다. 고수분들 답변을 기다립니다ㅠ 

이 질문에 댓글 쓰기 :

답변 1

만들어진 페이지를 볼수 있을까요?

음.. 아무래도 css랑 js랑 함께 사용해 만들어야할 것같은데요..
codepen.io에서
hover slider 키워드로 검색해서 비슷한거 찾아서 사용하시거나 제이쿼리를 공부해서 만드셔야 할것같습니다..
https://codepen.io/architechnium/pen/BmoZVP 이런것도 있네요 :) 참고되셨길 바랍니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 27
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT