728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
width: 1000px;
margin: 20px auto;
}
h1 {
text-align: center;
}
img {
width: 300px;
height: 400px;
}
.prod-list {
list-style: none;
padding: 0;
}
.prod-list li {
position: relative;
float: left;
padding: 0;
margin: 10px;
}
.prod-list .caption {
position: absolute;
top: 200px;
width: 300px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0; /* 화면에 보이지 않게하기*/
transition: all 0.6s ease-in-out; /* 모든 요소에 시작과 끝 부분을 0.6초 동안 애니메이션 적용*/
}
.prod-list li:hover .caption{
transform: translateY(-200%px);
opacity: 1;
}
.prod-list .caption h2, p {
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul class="prod-list">
<li>
<img src="../Resource/phone_case/phone_case1.jpg" alt="">
<div class="caption">
<h2>상품 1</h2>
<p>상품 1의 설명텍스트</p>
<p>가격 : 10,000원</p>
</div>
</li>
<li>
<img src="../Resource/phone_case/phone_case2.jpg" alt="">
<div class="caption">
<h2>상품 2</h2>
<p>상품 2의 설명텍스트</p>
<p>가격 : 20,000원</p>
</div>
</li>
<li>
<img src="../Resource/phone_case/phone_case3.jpg" alt="">
<div class="caption">
<h2>상품 3</h2>
<p>상품 3의 설명텍스트</p>
<p>가격 : 30,000원</p>
</div>
</li>
</ul>
</div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| animation 예제2 (0) | 2022.12.29 |
|---|---|
| animation 예제1 (0) | 2022.12.29 |
| transition 연습 (0) | 2022.12.29 |
| transform3 (0) | 2022.12.29 |
| teansform2 (0) | 2022.12.29 |