css 질문입니다. 채택완료
우주열차
6년 전
조회 1,814
1번위에 커서를 올리면 2번이 내려가는 효과인데영 슬라이드 되면서 3번도 내려가고
3번도 커서올리면 아래 다른 슬라이드(4번)가 내려가야되요
그래서 구조가
---------------------
1(호버시 2번이 내려감)
2
3 (2번이 밀리면서 아래로 내려감)
4
이렇게 만들고싶은데 어딜만져야될지 모르겠네요ㅠ
--------------------------------------------
코드는
<style>
.container {
position: relative;
width: 50%;
}</p>
<p>.image {
display: block;
width: 100%;
height: auto;
}</p>
<p>.overlay {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}</p>
<p>.container:hover .overlay {
bottom: 0;
height: 100%;
}</p>
<p>.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"></p>
<p>2번
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div></p>
<p>3번
<div class="container">
<img src="img_avatar.png" alt="Avatar" >
</div>
</div></p>
<p>이러합니다. 고수분들 답변을 기다립니다ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
답변에 대한 댓글 2개
�
우주열차
6년 전
http://www.joyagdol.com/test.php 페이지주소입니다
�
조나단입니다
6년 전
음.. 아무래도 css랑 js랑 함께 사용해 만들어야할 것같은데요..
codepen.io에서
hover slider 키워드로 검색해서 비슷한거 찾아서 사용하시거나 제이쿼리를 공부해서 만드셔야 할것같습니다..
https://codepen.io/architechnium/pen/BmoZVP 이런것도 있네요 :) 참고되셨길 바랍니다.
codepen.io에서
hover slider 키워드로 검색해서 비슷한거 찾아서 사용하시거나 제이쿼리를 공부해서 만드셔야 할것같습니다..
https://codepen.io/architechnium/pen/BmoZVP 이런것도 있네요 :) 참고되셨길 바랍니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인