■ 이미지 top변경으로 내려오는 이미지 만들기
○ HTML
<body>
<div class="wrap">
<header>
</header>
<main>
<div class="cts">
<img class="a1" src="img/a1.jpg" alt="">
<img class="a2" src="img/a2.jpg" alt="">
</div>
</main>
<footer>
</footer>
</div>
</body>○ Css
.wrap{
width: 80%;
margin: 0 auto;
}
header{
height: 200px;
background-color: rgb(201, 44, 44);
position: relative;
z-index: 2;
}
main > .cts{
width: 20%;
margin: 0 auto;
background-color: red;
position: relative;
}
main > .cts:hover > .a1{
top: 0;
}
main > .cts > img{
width: 100%;
display: block;
transition: top 1s;
}
main > .cts > .a1{
position: absolute;
top: -100%;
z-index: 1;
}
footer{
height: 200px;
border: 1px solid #000;
}
■ 옆으로 이동하는 이미지 만들기
○ HTML
<body>
<div class="wrap">
<header>
</header>
<main>
<div class="cts-l"></div>
<div class="cts">
<div class="cts-img">
<img class="a1" src="img/a1.jpg" alt="">
<img class="a2" src="img/a2.jpg" alt="">
<img class="a3" src="img/a3.jpg" alt="">
</div>
</div>
<div class="cts-r"></div>
</main>
<footer>
</footer>
</div>
</body>○ Css
.wrap{
width: 80%;
margin: 0 auto;
}
header{
height: 200px;
background-color: rgb(201, 44, 44);
position: relative;
z-index: 2;
}
main{
display: flex;
}
.cts-l, .cts-r{
width: calc((100% - 20%)/2);
background-color: #fff;
position: relative;
z-index: 10;
}
main > .cts{
position: relative;
width: 20%;
height: 200px;
margin: 0 auto;
background-color: red;
}
.cts > .cts-img{
display: flex;
width: 100%;
position: absolute;
left: 0;
transition: left 1s;
}
.cts:hover > .cts-img{
left: -200%;
}
main .cts-img > img{
width: 100%;
display: block;
}
footer{
height: 200px;
border: 1px solid #000;
}
'UIUX > 내용' 카테고리의 다른 글
| 3차 웹페이지 (0) | 2024.05.07 |
|---|---|
| 2번째 결과 형식 (0) | 2024.04.25 |
| 메뉴바 (0) | 2024.04.18 |
| position 속성 (0) | 2024.04.17 |
| display 속성 (1) | 2024.04.17 |