HTML&CSS 실습7 (정리x)

💜 HTML,CSS
HTML&CSS 실습7 (정리x)

Genie_. 2024. 3. 23. 22:14
728x90
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="240319_실습답.css">
<head>
    <meta charset="UTF-8">
    <title>240319 실습답</title>
</head>
<style>
    section{
        display: inline-block;
        width: 500px;
        height: 700px;
        overflow: hidden;
    }
    #paris{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500px;
        height: 700px;
        background-position: center;
        background-size: cover;
        transition-duration: 0.5s;
    }
    #paris:hover{
        transform: scale(120%);
        filter: brightness(50%);
    }
    #paris:hover > span{
        display: inline;
    }
    #paris{
        background-image: url("https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    }
    #tokyo{
        background-image: url("https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?q=80&w=2036&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    }
    #newyork{
        background-image: url("bg3.jpg");
    }
    #paris span{
        display: none;
        color: white;
        font-size: 1.85rem;
        font-weight: bold;
    }
    /**************************** 아래부터 추천방법 *****************************/
    #tokyo-section { /* section */
        width: 500px;
        height: 700px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }
    #tokyo{
        transition-duration: 0.5s;
    }
    #tokyo-section:hover #tokyo{
        transform: scale(120%);
        filter: brightness(80%);
    }
    #tokyo-section:hover span{
        display: block;
    }
    #tokyo { /* image-container */
        width: 500px;
        height: 700px;
        background-position: center;
        background-size: cover;
    }
    #tokyo-section span {
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
        font-size: 1.85em;
        font-weight: bold;
        color: white;
        z-index: 99;
    }
/********************************* 아래부터 뉴욕 **********************************/
    #newyork-section{ /* section */
        width: 500px;
        height: 700px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }
    #newyork{
        transition-duration: 0.5s;
    }
    #newyork-section:hover #newyork{
        transform: scale(120%);
        filter: brightness(80%);
    }
    #newyork-section:hover span{
        display: block;
        top: 50%;
    }
    #newyork{ /* image-container */
        width: 500px;
        height: 700px;
        background-position: center;
        background-size: cover;
    }

    #newyork-section span{
        display: block;
        position: absolute;
        left: 50%;
        top: 130%;
        text-align: center;
        transform: translate(-50%, -50%);
        transition-duration: 0.5s;
        font-size: 1.85em;
        font-weight: bold;
        color: white;
        z-index: 99;
    }

</style>
<body>
    <section>
        <div class="img-container" id="paris">
            <span>낭만이 있는 도시, 파리</span>
        </div>
    </section>

    <section id="tokyo-section">
        <div class="img-container" id="tokyo"></div>
        <span>도쿄의 야경은 사람의 마음을 뭉클하게 합니다.</span>
    </section>

    <section id="newyork-section">
        <div class="img-container" id="newyork"></div>
        <span>도쿄의 야경은 사람의 마음을 뭉클하게 합니다.</span>
    </section>
</body>
</html>
728x90
저작자표시 비영리 변경금지