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