Thiết kế website giá rẻ

Question

I am trying something with the help of JavaScript in which when we click on a card image, the image inside the card should move to the left and another div should get activated which contains the content. Suppose I want to click on the 3rd card image then this 3rd card’s image should be moved to left:0 or you can say over the 1st card image and inside the 3rd card image’s div should get activated which contains the content.

You can understand this with the help of images of what I want-

Original look

What I want

const cards = document.querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("click", () => {
    const details = card.querySelector(".details");
    const img = card.querySelector(".card_img");
    details.classList.toggle("active_details");
    img.classList.toggle("active_img");
  });
});

.team_main_container {
  border: 2px solid red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.team_main_container .team_cards_container {
  border: 2px solid green;
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.team_main_container .team_cards_container .card_section {
  border: 2px solid red;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); */
  gap: 20px;
}

.team_main_container .team_cards_container .card_section .card {
  /* width: 100%;
    height: auto; */
  width: calc((100% / 5) - 16px);
  height: 30rem;
  cursor: pointer;
  border: 2px solid red;
  position: relative;
}

.team_main_container .team_cards_container .card_section .card .card_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team_main_container .team_cards_container .card_section .card .shot_det {
  border: 2px solid green;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #93310c;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.team_main_container .team_cards_container .card_section .card:hover .shot_det {
  opacity: 1;
}

.team_main_container .team_cards_container .card_section .card .details {
  display: none;
}

.team_main_container .team_cards_container .card_section .card .details.active_details {
  border: 2px solid green;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #26252a;
  transition: 0.3s ease-in-out;
}

.team_main_container .team_cards_container .card_section .card .card_img.active_img {
  transform: translate(-212.2%);
}

<div class="team_main_container">
  <div class="team_cards_container">
    <div class="card_section">
      <div class="card">
        <img src="../images/img.jpg" alt="card 1" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 1</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 2" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 2</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 3" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 3</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 4" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 4</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 5" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 5</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 6" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 6</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 7" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 7</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 8" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 8</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 9" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 9</p>
        </div>
      </div>

      <div class="card">
        <img src="../images/img.jpg" alt="card 10" class="card_img">
        <p class="shot_det">Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
        <div class="details">
          <p class="lon_det">Card 10</p>
        </div>
      </div>
    </div>
  </div>
</div>

Thiết kế website giá rẻ

Danh mục

Repositioning and activating image view does not work as expected [closed]