Hover on “Everything But”

Ask the community
,
1

Hi everyone!

For my gallery I want to apply a hover state to everything but the element (image) actually being hovered over. Specifically, when hovering over an image I want the rest of the page/images to ‘dim’ behind a lightened overlay, as well as the text (title + description) to appear underneath the hovered image. How would I go about coding this, so that hovering over an image creates a white background overlay with slight opacity, and the text to appear underneath the image being hovered over?

For reference: https://duchanvre.com/projets/

2

You cannot do it with galleries, but you can use a repeater instead, and then you’ll be able to use code to apply this effect.

3

Thanks for responding! How would I code it with a repeater? And is there a way to code a repeater style so that it resembles a masonry gallery?

4

@natalie75010 is something like this good for you?
https://jonatandor35.wixsite.com/test/repeater-gallery

5

@jonatandor35 the layout if perfect! Is there a way to make the text hidden and then appear on hover?

6

@natalie75010 Yes. There is.
So do the following:

  1. Add a repeater & a dataset
  2. Connect the repeater to the dataset
  3. In the repeater put:
    3.1 image
    3.2 textbox
  4. connect the image to the the dataset image field and the text to the dataset text field
  5. Add another image (image2) to the repeater. Put it so it’ll a layer in front of the first image (it sould in the exact position.
  6. On the editor, click image 2 and use filter to make it grey.
  7. Connect image to to the dataset image field as you did for image 1
  8. Make image 2 collapsed on load and the text hidden on load (you can do it via the property panel.

And use this code (adjust the property Id’s to yours):

$w.onReady(function () {
    $w("#image1").fitMode = "fixedWidth";
    $w("#image2").fitMode = "fixedWidth";
    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#container3").onMouseIn(event => {
            $w("#repeater1").forEachItem(($i, iData, inx) => {
                if(inx === index){
                    $i("#image2").collapse();
                    $i("#text43").show();
                } else {
                    $i("#image2").expand();
                    $i("#text43").hide();
                }
            })
        })
    })
    $w("#repeater1").onMouseOut(event => {
        $w("#repeater1").forEachItem(($i, iData, inx) => {
        $i("#image2").collapse();
        $i("#text43").hide();
        })
    })
});