아임웹 코드 - 클릭으로 확대되는 이미지 슬라이드 섹션

시연 동영상 보기

<div class="section03">

<div class="container">

  <div class="slide" style="background-image: url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/08c741be731f3.png');">

    <h3>아임웹</h3>

  </div>

  <div class="slide" style="

          background-image: url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/c1363454a5463.png');

        ">

    <h3>코드</h3>

  </div>

  <div class="slide" style="

          background-image: url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/879a20404c1b6.png');

        ">

    <h3>이미지</h3>

  </div>

  <div class="slide" style="

          background-image: url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/21522b55867f5.png');

        ">

    <h3>슬라이드</h3>

  </div>

  <div class="slide" style="

          background-image: url('https://cdn.imweb.me/upload/S20220110de20c90fdecb7/de750590b37f8.png');

        ">

    <h3>효과</h3>

  </div>

</div>

</div>

<style>

  @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap");

* {

  box-sizing: border-box;

}

.section03 {

  font-family: "Black Ops One", cursive;

  overflow: hidden;

  margin: 0;

  background-color: #1B1B1B;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

    font-size: 16px;

}

.container {

  width: 100%;

  display: flex;

  padding: 0 20px;

}

.slide {

  height: 80vh;

  border-radius: 20px;

  margin: 10px;

  cursor: pointer;

  color: #fff;

  flex: 1;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

  transition: all 0.7s ease-in-out;

}

.slide h3 {

  position: absolute;

  font-size: clamp(1rem, 5vw, 5rem);

  bottom: 20px;

  left: 20px;

  margin: 0;

  opacity: 0;

  background-color: #e3fdf5;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}

.slide.active {

  flex: 10;

  filter: blur(0px);

}

.slide.active h3 {

  opacity: 1;

  transition: opacity 0.3s ease-in 0.4s;

}

@media screen and (max-width: 50rem) {

  .container {

    display: flex;

    height: 90vh;

    flex-direction: column;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    align-items: center;

  }

  .slide {

    width: 90vw;

    border-radius: 20px;

    margin: 10px;

    cursor: pointer;

    color: #fff;

    flex: 1;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    position: relative;

    transition: all 0.7s ease-in-out;

  }

  .slide.active {

    flex: 10;

    filter: blur(0px);

  }

  .slide h3 {

    left: 5px;

  }

}

</style>

<script>

  function slidesPlugin(activeSlide = 2) {

  const slides = document.querySelectorAll(".slide");

  slides[activeSlide].classList.add("active");

  for (const slide of slides) {

    slide.addEventListener("click", () => {

      clearActiveClasses();

      slide.classList.add("active");

    });

  }

  function clearActiveClasses() {

    slides.forEach((slide) => {

      slide.classList.remove("active");

    });

  }

}

slidesPlugin();

</script>