css파일
@import
url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap');
body {
font-family: 'Do Hyeon', sans-serif;
text-align: center;
}
.prod-list {
list-style: none;
margin: 0;
padding: 0;
}
.prod-list li {
position: relative;
float: left;
padding: 0;
margin: 10px;
overflow: hidden;
}
.prod-list img {
margin: 0;
padding: 0;
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 .caption p {
color: #fff;
text-align: center;
}
#headline {
font-size: 3em;
}
#headline:hover {
animation: color 0.5s infinite, color 0.5s infinite alternate;
}
@keyframes color {
from { color: red; }
to { color: rgb(0, 255, 64); }
}html파일 <body>태그
<body>
<h1 id="headline">신상품 <span id="headline_list">목록</span></h1>
<div id="container">
<ul class="prod-list">
<li>
<img src="images/prod1.jpg">
<div class="caption">
<h1>상품 1</h1>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod2.jpg">
<div class="caption">
<h1>상품 2</h1>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod3.jpg">
<div class="caption">
<h1>상품 3</h1>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #15 : 미디어 쿼리 (0) | 2022.12.16 |
|---|---|
| HTML & CSS #14 : 반응형 웹 (0) | 2022.12.14 |
| HTML & CSS #13 : CSS 애니메이션 (0) | 2022.12.14 |
| HTML & CSS #12 : CSS 선택자 (0) | 2022.12.14 |
| HTML & CSS #11 : 멀티미디어 (0) | 2022.12.13 |
댓글