top of page
A grey, 8-pointed star with long, thin rays on a yellow background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
A small yellow star shape on a dark grey background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
The top half of a red Christmas tree bauble on a beige background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
An abstract cluster of dark grey triangles on a bright yellow background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
The outline of an abstract-looking snowman with just an orange circle for a nose.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
An abstract, orange 4-pointed star on a beige background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
A red and white striped circle on a red and white striped background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
An angular, dark grey bowtie on an orange background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
3 red berries on a green background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
The top of a red santa hat with a white pom pom on a dark grey background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
An abstract green and beige snowflake on a bright yellow background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
A tiny, white 8-pointed star on a red background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
The top half of an abstract, bright yellow Christmas tree on a beige background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
A soft, 4-pointed abstract yellow shape on a dark beige background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.
2 white, disconnected halves of a snowflake on an orange background.
The word HO written in white on a black/red gradient background. This image appears over all the images on hover.

LET’S RECREATE THIS HOVER EFFECT IN 10 STEPS.

1.

Add a grid to your section with 5 columns and 3 rows, then add different images to each grid cell and set the width to 100%.

Screenshot of step 1

2.

Add another image to each grid cell, and set the width to 100%.

Screenshot of step 2

3.

Set the opacity of this image to 0, so it’s not visible when the site loads.

Screenshot of step 3

4.

Select this hidden image, and from the Interactions tab of the Inspector panel, select Effects, then Add an Effect.

Screenshot of step 4

5.

Choose Custom, and name it Opacity.

Screenshot of step 5

6.

Now set the image opacity to 100% and click Done.

Screenshot of step 6

7.

Select the image again, and from the interactions tab, select Triggers, then Add a Trigger.

Screenshot of step 7

8.

Choose Hover.

Screenshot of step 8

9.

Under the dropdown called Effect, choose Opacity, then click Done.

Screenshot of step 9

HAPPY HOLIDAYS

10.

Repeat steps 4-9 for all the hidden images.

bottom of page