<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 1300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.col {
width: 32%;
}
.col .box {
width: 100%;
margin-bottom: 30px;
}
.col .box img{
width: 100%;
height: auto;
}
.pop {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
}
.pop figure {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pop figure img {
max-width: 1300px;
max-height: 600px;
}
.close {
width: 100%;
height: 100%;
}
</style>
</head>
<boby>
<div id="container">
<div class="col">
<div class="box">
<img src="image/picture1.jpg" alt="">
</div>
<div class="box">
<img src="image/picture2.jpg" alt="">
</div>
<div class="box">
<img src="image/picture3.jpg" alt="">
</div>
</div>
<div class="col">
<div class="box">
<img src="image/picture4.jpg" alt="">
</div>
<div class="box">
<img src="image/picture5.jpg" alt="">
</div>
<div class="box">
<img src="image/picture6.jpg" alt="">
</div>
</div>
<div class="col">
<div class="box">
<img src="image/picture7.jpg" alt="">
</div>
<div class="box">
<img src="image/picture8.jpg" alt="">
</div>
<div class="box">
<img src="image/picture9.jpg" alt="">
</div>
</div>
</div>
<div class="pop">
<div class="close"></div>
<figure></figure>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
//https://unsplash.com/
//thumbnail 클릭하면 modal, popup으로 이미지 확장시키기
$(".box").on("click", function() {
var src = $(this).html();
console.log(src);
$(".pop").fadeIn();
$(".pop figure").html(src);
});
// $(".pop").on("click", function() {
// $(this).fadeOut();
// });
$(".close").on("click", function() {
$(".pop").fadeOut();
});
</script>
</boby>
</html>
Engineering is the closest thing to magic that exists in the world.