<!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>
