top of page
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%.
2.
Add another image to each grid cell, and set the width to 100%.
3.
Set the opacity of this image to 0, so it’s not visible when the site loads.
4.
Select this hidden image, and from the Interactions tab of the Inspector panel, select Effects, then Add an Effect.
5.
Choose Custom, and name it Opacity.
6.
Now set the image opacity to 100% and click Done.
7.
Select the image again, and from the interactions tab, select Triggers, then Add a Trigger.
8.
Choose Hover.
9.
Under the dropdown called Effect, choose Opacity, then click Done.
HAPPY HOLIDAYS
10.
Repeat steps 4-9 for all the hidden images.
bottom of page