Hover Reveal Effect

Ask the community
, , ,
1

I’m having trouble with
I have a problem with a design I want to implement on my website. I have a section with 5 photos, and I want that when one of the photos is hovered over, all the other photos disappear, the hovered image moves to the left (to the beginning of the screen), and a related text is revealed. When the hover ends, everything should return to its original state and the text should disappear, so I can hover over another photo.

Working in
Wix Studio, Dev Mode

What I’ve tried so far
I’ve already tried with code, with Wix’s built-in animations, and even combining both — but nothing works properly. Has anyone seen a tutorial or done something similar?

Extra context
S

State 1
State 11571×543 17.1 KB

State 2
State 21567×538 30 KB

creenshots

2

You can make it using customCSS and repeater data mixed,
first move your description container to pinned to the section,
and then add this,

$w.onReady(() => {
  $w("#descBox").collapse();
});

and then, add css in global.css for custom animation

/* Default team card */
.team-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Card moves left */
.card-hovered {
  transform: translateX(-100px);
  z-index: 10;
}

/* Card fades out */
.card-fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Description box show */
.desc-visible {
  opacity: 1 !important;
  pointer-events: auto;
}

and for repeater,

$w.onReady(() => {
  $w("#teamRepeater").onItemReady(($item, itemData, index) => {
    const $card = $item("#teamCard"); // Main team card container
    const $descBox = $w("#descBox");  // Absolute box for text

    // Mouse In
    $card.onMouseIn(() => {
      // 1. Fade out other cards
      $w("#teamRepeater").forEachItem(($otherItem, otherData, i) => {
        const $otherCard = $otherItem("#teamCard");
        if (i !== index) {
          $otherCard.customClassList.add("card-fade-out");
        }
      });

      // 2. Move hovered card to left
      $card.classList.add("card-hovered");

      // 3. Populate and show description
      $descBox.expand();
      $w("#descBox").customClassList.add("desc-visible");
      $w("#descName").text = itemData.name;
      $w("#descTitle").text = itemData.title;
      $w("#descText").text = itemData.description;
    });

    // Mouse Out
    $card.onMouseOut(() => {
      // Reset all cards
      $w("#teamRepeater").forEachItem(($resetItem) => {
        const $resetCard = $resetItem("#teamCard");
        $resetCard.customClassList.remove("card-fade-out");
        $resetCard.customClassList.remove("card-hovered");
      });

      // Hide description box
      $descBox.customClassList.remove("desc-visible");
      $descBox.collapse();
    });
  });
});

I hope this code will help you :wink:

1 Like