<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>신상품 목록</title>
<style>
.prod-list{
list-style: none;
margin: 10px;
padding: 10px;
}
.prod-list li{
position: relative;
float: left;
margin: 10px;
padding: 10px;
overflow: hidden;
}
.prod-list img{
float: left;
z-index: 5;
}
.prod-list .caption{
position: absolute;
top: 200px;
width: 300px;
height: 200px;
padding-top: 20px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.2s ease-in-out;
z-index: 10;
}
.prod-list li:hover .caption{
opacity: 1;
transform: translateY(-200px);
}
.prod-list .caption h1, .prod-list p{
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>신상품 목록</h1>
<div class="container">
<ul class="prod-list">
<li>
<img src="../Chapter13/images/prod1.jpg">
<div class="caption">
<h1>상품 1</h1>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</li>
<li>
<img src="../Chapter13/images/prod2.jpg">
<div class="caption">
<h1>상품 2</h1>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="../Chapter13/images/prod3.jpg">
<div class="caption">
<h1>상품 3</h1>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/
부족 했던 점