개발나라 스용공주

[실습] hover시 상품 상세 설명 본문

WEB/포트폴리오

[실습] hover시 상품 상세 설명

스용공주 2024. 11. 16. 15:38
728x90
728x90

 

 

  • 구조 : item이 3개 있고 그 위에 덮어질 텍스트 caption 또한 3개 존재 => 이들을 감싸는 items 존재
  • display : 가로 배치를 위해 display : inline-block;
  • 중앙정렬하는 법 : item들이 inline-block이므로 items에 text-align : center;
  • 텍스트와 이미지 겹치기 : 이미지 위에 텍스트를 겹치는 것이므로 기준점을 이미지로 삼기 위해 position 부여를 이미지는 relative, 텍스트는 absolute 후 top과 left를 0으로 적용
  • hover 요소 : hover 시 서서히 등장하기 위해 transition을 0.5s주고 transition을 적용하기 위해 display : none이 아닌 opacity로 보이지 않게 만들어줌 (opacity : 0으로 보이지 않게 하고 hover시 opacity : 1)
  • 배경 투명도 : 배경부분만 투명도를 적용하기 위해 background-color에 투명도를 줌 (rgba(0, 0, 0, 0.7))

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <div class="items">
        <div class="item">
            <img src="image/product-01.png" alt="">
            <div class="caption">
                <h2>Rirakuma doll 25cm</h2>
                <p>
                    The owner of the most popular and cute looks Rilakkuma ~! Rilakkuma giant - It is size sale to small size.
                </p>
                <p>Price : <s>$12</s> → $10</p>
                <a href="#none">View Details</a>
            </div>
        </div>
        <div class="item">
            <img src="image/product-02.png" alt="">
            <div class="caption">
                <h2>Connie doll (110cm)</h2>
                <p>
                    The owner of the most popular and cute looks Rilakkuma ~! Rilakkuma giant - It is size sale to small size.
                </p>
                <p>Price : <s>$42</s> → $40</p>
                <a href="#none">View Details</a>
            </div>
        </div>
        <div class="item">
            <img src="image/product-03.png" alt="">
            <div class="caption">
                <h2>Cacao Friends figure</h2>
                <p>
                    The owner of the most popular and cute looks Rilakkuma ~! Rilakkuma giant - It is size sale to small size.
                </p>
                <p>Price : <s>$32</s> → $30</p>
                <a href="#none">View Details</a>
            </div>
        </div>
    </div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    margin : 0;
}

.items {
    text-align: center;
}

.item {
    display: inline-block;
    width: 300px;
    height: 300px;
    position: relative;
    margin : 10px;
}

.caption {
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    color : white;
    padding : 20px;
    box-sizing: border-box;
    opacity: 0;
    transition : 0.5s;
}

.caption a {
    color : white;
    text-decoration: none;
    background-color: teal;
    padding : 7px;
    border-radius: 3px;
}

.caption a:hover {
    color : black;
    background-color: white;
}

.item:hover .caption {
    opacity: 1;
}

 

728x90
728x90

'WEB > 포트폴리오' 카테고리의 다른 글

[실습] 슬라이드 애니메이션이 적용된 탭메뉴 만들기  (0) 2024.11.08
[실습] 웹페이지 탭메뉴 콘텐츠 만들기  (6) 2024.11.08
[실습] 웹페이지 - To Do list 어플리케이션 (실습과정 상세 소개)  (6) 2024.10.09
[실습] 웹페이지 - 다크모드 전환 기능 웹페이지 만들기 (실습과정 상세 소개)  (0) 2024.10.02
'WEB/포트폴리오' Related Articles more
Comments