Revealing content on hover

Design help Animations & Interactions
1

Hi everyone,

I’m trying to accomplish a “reveal on hover effect” for my portfolio items, like on this site: Portfolio – Blaise Posmyouck, webmaster

I can’t figure out how I do this with multiple images…

Can anyone help?

Kind regards

Here is my public share link: LINK
(how to access public share link)

2

The idea (To solve this - this is more task for freelancer).

First level - hide/show the image:
One Div. X images one on top of each other (By absolute position (left: 0;right: 0; bottom: 0;) and relative parent).

Side menu - rollhover item 2 → opacity:0 for image 1 → opacity: 1 for image 2 (And so on).

https://university.webflow.com/lesson/reveal-elements-on-hover

Remove this element portfolio2-wrapper-1 (inspect element) to really see the opacity:0 and 1 idea:
image

Level 2 - the polygon right-left move effect

image
image1173×648 124 KB

Create again div (With higher Z index than the images)

position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

And it move right/left by simple transform (And parent with overflow:hidden) - give effect like window.

image
image983×704 39.2 KB

Mix 1 & 2 to get this effect.