Can I hover on text and then all pictures under that tag add a colour filter?

Discussion Ask a question
,
1

I am making a website for photography and there are three categories: advertising, editorial, creative. On the home page where there is a cover for each album, I’d like to be able to hover on the menu name eg: advertising and then all the covers that are considered advertising get a blue filter and a text that states the client and project and all other categories fade out or something. Not sure this makes sense haha but is it possible with Wix? I currently have a Hoverbox on the cover and when I go to that specific image I am getting this effect but I’d like it done with hovering on the Category and ALL pics that fit that category apply the filter etc.
Does this require a lot of code or is this simple for someone to do?

2

Hi,
This is definitely possible and it won’t require that much code once you’ve laid out the elements you’ll need to accomplish this.

I’m not sure how you’re displaying your categories or albums but you’ll need to make sure your categories are displayed in separate buttons , repeater items or tags .

You’ll then need to place a container or box and text element over the images to create the overlay filter and set their corresponding colors of each box with low opacity and then set both the box and text to be hidden on load from the properties panel , like so:

1483×705 182 KB

You can then use the onMouseIn and onMouseOut functions to create the hover effect and then run a condition that hides / shows the specific overlay filters based on which category is being hovered over.

Just to give you an idea here’s my example:

$w.onReady(function () {
    $w("#button1").onMouseIn(() => {
        $w("#box1").show();
        $w("#text1").show();
    })

    $w("#button1").onMouseOut(() => {
        $w("#box1").hide();
        $w("#text1").hide();
    })
});

Preview:

Hope this helps!

Best regards,
Miguel

3

Thank you so much Miguel! Sorry for the late reply, I will give this a try thank you again for taking the time!