Hover Photo over Photo effect

I would like to create effect like seen here, where stuff member photo changes on hover. About Grovemade® | Story, Portland Hometown & Product Design

how to do that properly?


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

Create div with two images inside, with these attributes.

DIV (position: relative)
  IMG
  IMG class="initial" (position: absolute, top: 0, left: 0, transition: opacity 200ms)

Upload hover image to the first (non-absolute one), normal image to the one with class.

Click on DIV. Give it an interaction.

HOVER
  Affect different elements
  Affect nested elements (with class "initial")
  OVER
    Set opacity to 0
  OUT
    Set opacity to 0

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.