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
λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ λ³€κ²½κΈˆμ§€

'πŸ’œ HTML,CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

HTML&CSS 22일차 (정리x)  (0) 2024.03.23
HTML&CSS 21일차 (정리x)  (0) 2024.03.23
HTML&CSS 20일차 (정리x)  (0) 2024.03.23
HTML&CSS 19일차 (정리x)  (0) 2024.03.23
HTML&CSS μ‹€μŠ΅6 (정리x)  (0) 2024.03.23

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”