(Only CSS,HTML) Section With Popup Box

HTML

└── .image
	└── .image-container
		└── .image-box 1
        	├── .image-img : 이미지
        	├── .image-text : 이미지 설명, 관람 버튼 등
            ├── .image-btn : 팝업 연결 버튼 (input)
            ├── .image-bg : 팝업 열릴 때 배경
            └── .image-popup : 팝업창
            
		├── .image-box 2
		└── .image-box 3

input id와 label for(x버튼, 제목 진입 버튼)을 연결하기

• x버튼 누르면 팝업창 사라지고
• 이미지 제목 누르면 팝업창 열리고

    <section id="image">
      <h3>Image's</h3>
      <div class="image-container">
        <!-- box1 -->
        <div class="image-box">
          <div class="image-img">
            <img src="./images/1.jpg" alt="" />
          </div>
          <div class="image-text">
            <span class="category">Random Spread</span>
            <label for="popup1">물감을 무작위로 흩뿌리면</label>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Temporibus repellat delectus, commodi sunt, eligendi nulla dolorum
              alias sint aut distinctio consequuntur quae animi, quod
              dignissimos eum? Est mollitia nostrum similique?
            </p>
            <div class="exhibition-time">
              <span class="exhibition"
                ><i class="fa-solid fa-layer-group"></i> 12 Exhibition</span
              >
              <span class="time"
                ><i class="fa-solid fa-clock"></i> 1 hr 30 min</span
              >
            </div>
          </div>

          <input type="checkbox" id="popup1" class="popup-btn" />
          <div class="popup-bg"></div>
          <div class="image-popup">
            <label for="popup1" class="p-close">
              <i class="fa-solid fa-xmark"></i>
            </label>
            <div class="popup-content">
              <span>Image 작업 과정</span>
              <video controls>
                <source src="./videos/work.mp4" type="video/mp4" />
              </video>
              <strong>이미지 해설</strong>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut
                labore impedit itaque voluptate, maiores omnis ipsam
                consectetur. Vel eius ipsum accusantium reprehenderit cumque
                quisquam laboriosam, natus sapiente sunt facilis nisi?
              </p>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Repudiandae minus architecto accusamus suscipit nulla molestiae
                aliquam hic aperiam, fugiat explicabo perferendis molestias
                saepe iure ipsa expedita facilis ipsum ad. Dolores?
              </p>
              <a href="#">지금 관람하기</a>
            </div>
          </div>
        </div>
        <!-- box2 -->
        <div class="image-box">
          <div class="image-img">
            <img src="./images/2.jpg" alt="" />
          </div>
          <div class="image-text">
            <span class="category">Random Spread</span>
            <label for="popup2">물감을 무작위로 흩뿌리면</label>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Temporibus repellat delectus, commodi sunt, eligendi nulla dolorum
              alias sint aut distinctio consequuntur quae animi, quod
              dignissimos eum? Est mollitia nostrum similique?
            </p>
            <div class="exhibition-time">
              <span class="exhibition"
                ><i class="fa-solid fa-layer-group"></i> 12 Exhibition</span
              >
              <span class="time"
                ><i class="fa-solid fa-clock"></i> 1 hr 30 min</span
              >
            </div>
          </div>

          <input type="checkbox" id="popup2" class="popup-btn" />
          <div class="popup-bg"></div>
          <div class="image-popup">
            <label for="popup2" class="p-close">
              <i class="fa-solid fa-xmark"></i>
            </label>
            <div class="popup-content">
              <span>Image 작업 과정</span>
              <video controls>
                <source src="./videos/work.mp4" type="video/mp4" />
              </video>
              <strong>이미지 해설</strong>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut
                labore impedit itaque voluptate, maiores omnis ipsam
                consectetur. Vel eius ipsum accusantium reprehenderit cumque
                quisquam laboriosam, natus sapiente sunt facilis nisi?
              </p>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Repudiandae minus architecto accusamus suscipit nulla molestiae
                aliquam hic aperiam, fugiat explicabo perferendis molestias
                saepe iure ipsa expedita facilis ipsum ad. Dolores?
              </p>
              <a href="#">지금 관람하기</a>
            </div>
          </div>
        </div>
        <!-- box3 -->
        <div class="image-box">
          <div class="image-img">
            <img src="./images/3.jpg" alt="" />
          </div>
          <div class="image-text">
            <span class="category">Random Spread</span>
            <label for="popup3">물감을 무작위로 흩뿌리면</label>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Temporibus repellat delectus, commodi sunt, eligendi nulla dolorum
              alias sint aut distinctio consequuntur quae animi, quod
              dignissimos eum? Est mollitia nostrum similique?
            </p>
            <div class="exhibition-time">
              <span class="exhibition"
                ><i class="fa-solid fa-layer-group"></i> 12 Exhibition</span
              >
              <span class="time"
                ><i class="fa-solid fa-clock"></i> 1 hr 30 min</span
              >
            </div>
          </div>

          <input type="checkbox" id="popup3" class="popup-btn" />
          <div class="popup-bg"></div>
          <div class="image-popup">
            <label for="popup3" class="p-close">
              <i class="fa-solid fa-xmark"></i>
            </label>
            <div class="popup-content">
              <span>Image 작업 과정</span>
              <video controls>
                <source src="./videos/work.mp4" type="video/mp4" />
              </video>
              <strong>이미지 해설</strong>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut
                labore impedit itaque voluptate, maiores omnis ipsam
                consectetur. Vel eius ipsum accusantium reprehenderit cumque
                quisquam laboriosam, natus sapiente sunt facilis nisi?
              </p>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Repudiandae minus architecto accusamus suscipit nulla molestiae
                aliquam hic aperiam, fugiat explicabo perferendis molestias
                saepe iure ipsa expedita facilis ipsum ad. Dolores?
              </p>
              <a href="#">지금 관람하기</a>
            </div>
          </div>
        </div>
      </div>
    </section>

CSS

object-fit
요소의 크기에 맞게 img,video 태그 같은 대체 요소의 크기 조정
-- cover : 원본 비율 유지하면서 꽉 채우기
-- contain : 원본 비열 유지하면서 들어갈 수 있게만

display: -webkit-box; 가로 정렬
-webkit-box-orient: vertical; 세로 정렬까지
-webkit-line-clamp: 블록의 줄 개수를 지정할 수 있다.

flex-wrap : wrap
요소의 총 너비가 부모보다 크면 요소를 다음줄에 나열하도록

.image-popupr과 .popup-bg의 display:none으로 해두었다가 input 체크하면 열리도록

~ 선택자
A ~ B면 A 옆 B만 선택하도록

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}

#image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
}

#image h3 {
  font-size: 2.6rem;
  color: #333333;
  font-weight: 700;
}

.image-box {
  width: 100%;
  /* max-width: 300px; */
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  transition: all ease 0.3s;
}
.image-box:hover {
  box-shadow: 2px 20px 30px rgba(0, 0, 0, 0.08);
}

.image-img {
  width: 100%;
}
.image-img img {
  width: 100%;
  /* height: 100%; */
  height: 400px;
  object-fit: cover;
  object-position: center;
}
.image-text {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.image-text .category {
  color: #333333;
  font-size: 0.9rem;
  font-weight: 500;
}
.image-text label {
  color: #333333;
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.image-text p {
  color: #555555;
  font-size: 0.9rem;
  margin: 10px 0px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exhibition-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.exhibition-time span {
  font-size: 0.9rem;
  color: #333333;
  font-weight: 500;
}
.exhibition-time span i {
  color: #db1032;
  margin-right: 5px;
}
.popup-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-color: #1a1a1a5b;
  animation: fade 0.6s;
}
.image-popup {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: 90%;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  overflow: hidden;
}
.image-popup .p-close {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #db1032;
  color: #ffffff;
  cursor: pointer;
  margin-left: auto;
  border-radius: 5px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.popup-content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.popup-content span {
  color: #141414;
  margin: 10px 0px;
  font-weight: 700;
}
.popup-content {
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Chrome, Safari and Opera */
.popup-content::-webkit-scrollbar {
  display: none;
}

.popup-content strong {
  color: #141414;
  margin: 10px 0px;
  font-size: 1.3rem;
}
.popup-content p {
  margin: 10px 0px;
  color: #333333;
  font-size: 0.9rem;
}
.popup-content a {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #db1032;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
}
.popup-btn:checked ~ .popup-bg,
.popup-btn:checked ~ .image-popup {
  display: block;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.popup-btn {
  display: none;
}
.image-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin-top: 30px;
  max-width: 1000px;
  width: 90%;
}
@media (max-width: 800px) {
  .image-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 550px) {
  .image-container {
    grid-template-columns: 1fr;
  }
  #image h3 {
    font-size: 1.6rem;
  }
}

참고

Create A Course Section With Popup Box Only Using HTML And CSS