Streaming live at 10am (PST)

Revealing content on hover

#1

Hi everyone,

I’m trying to accomplish a “reveal on hover effect” for my portfolio items, like on this site: https://www.blaiseposmyouck.com/portfolio

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)

0 Likes

#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).

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

Level 2 - the polygon right-left move effect

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.

Mix 1 & 2 to get this effect.

0 Likes