<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
figure.snip1200 {
font-family: 'Noto Sans KR', sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 190px;
max-width: 190px;
max-height: 190px;
width: 100%;
color: #000000;
text-align: center;
font-size: 14px;
}
figure.snip1200 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
figure.snip1200 img {
max-width: 100%;
position: relative;
opacity: 0.9;
}
figure.snip1200 figcaption {
position: absolute;
top: 80%;
left: 10%;
right: 10%;
bottom: 80%;
border-width: 1px 1px 0;
}
figure.snip1200 .heading {
overflow: hidden;
-webkit-transform: translateY(50%);
transform: translateY(50%);
position: absolute;
bottom: 0;
width: 100%;
}
figure.snip1200 h2 {
display: table;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1200 h2 span {
font-weight: 800;
}
figure.snip1200 h2:before,
figure.snip1200 h2:after {
position: absolute;
display: block;
width: 1000%;
height: 1px;
content: '';
background: white;
top: 50%;
}
figure.snip1200 h2:before {
left: -1000%;
}
figure.snip1200 h2:after {
right: -1000%;
}
figure.snip1200 p {
top:50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
width: 100%;
padding: 0 0px;
margin: 0;
opacity: 0;
line-height: 1.6em;
font-size: 1.1em;
}
figure.snip1200 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1200:hover img,
figure.snip1200.hover img {
opacity: 0.25;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1200:hover figcaption,
figure.snip1200.hover figcaption {
top: 20%;
bottom: 20%;
}
figure.snip1200:hover p,
figure.snip1200.hover p {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
Resources
</style>
</head>
<body>
<figure class="snip1200">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample32.jpg" alt="sq-sample32" />
<figcaption>
<p>hi </p>
<p>hi2</p>
<p> hi3 </p>
<p>hi4</p>
<div class="heading">
<h2>hi</h2>
</div>
</figcaption>
<a href="#"></a>
</figure>
</body>
</html>
이 예시에서 hi라는 각 목록마다 p 태그를 붙이면 글자가 겹처나옵니다 ㅠ_ㅠ 겹처나오지 않고 한줄 한줄 나오게 할수있는 방법은 없을까요?? 아무리 해도 잘 안되네요 ㅠㅠㅠㅠ