css 질문입니다.
본문
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
만들어진 페이지를 볼수 있을까요?
http://www.joyagdol.com/test.php 페이지주소입니다
음.. 아무래도 css랑 js랑 함께 사용해 만들어야할 것같은데요..
codepen.io에서
hover slider 키워드로 검색해서 비슷한거 찾아서 사용하시거나 제이쿼리를 공부해서 만드셔야 할것같습니다..
https://codepen.io/architechnium/pen/BmoZVP 이런것도 있네요 :) 참고되셨길 바랍니다.
답변을 작성하시기 전에 로그인 해주세요.
