들블리셔

.items{
&nbsp; &nbsp; &nbsp;.item1{}
&nbsp; &nbsp; &nbsp;.item2{}
&nbsp; &nbsp; &nbsp;.item3{}
}&nbsp;
이런식으로 하셔야하는데
items를 각각 주셨네요!

<!DOCTYPE html>
<html lang="ko">
<head>
&nbsp; &nbsp; <meta charset="UTF-8">
&nbsp; &nbsp; <title>오버하면 상세설명 나타나는 상품목록</title>
&nbsp; &nbsp; <style>
&nbsp; &nbsp; &nbsp; &nbsp; .items {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .item {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 300px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #ddd;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 10px;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .caption {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 300px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.7);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 40px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: 0.5s;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .caption a {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: teal;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 7px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 3px;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .caption a:hover {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #fff;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #000;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .item:hover .caption {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; </style>
</head>
<body>
&nbsp; &nbsp; <div class="items">
&nbsp; &nbsp; &nbsp; &nbsp; <div class="item">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="1.jpg" alt="">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="caption">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>라이언인형</h2>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing.
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Price : <s>$12</s> $10
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#none">view detail</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; <div class="item">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="1.jpg" alt="">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="caption">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>라이언인형</h2>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing.
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Price : <s>$12</s> $10
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#none">view detail</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; <div class="item">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="1.jpg" alt="">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="caption">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>라이언인형</h2>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing.
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Price : <s>$12</s> $10
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#none">view detail</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>
</body>
</html>
이렇게 한 번 해보셔요^^!!

들블리셔

게시글