Skip to main content
HARSHIKA_VERMA
Community Manager
HARSHIKA_VERMACommunity Manager
Community Manager
February 7, 2023
Question

How to prototype an image gallery with a hover effect in Adobe XD?

  • February 7, 2023
  • 3 replies
  • 3215 views

Hi Everyone,

 

Welcome to the Second Month of the Year 2023!

 

We've seen various reports where our customers are trying to create a prototype image gallery with a hover effect in Adobe XD.

One of our community experts AkinGn has created a quick tutorial and shared a workaround solution to achieve the desired output.

 

Akin is an experienced designer who has been passionate about visual and interface design since the 2000s. He started with graphic and print design, but after completing a web and graphic design program at a private institute in 2008, he transitioned to web and UI design and learned HTML and CSS. In addition to his design work, Akin shares his knowledge and insights on his YouTube channel

 

 

 

 

Description

 

  1. Create an illusion since we can't change the Z index of the thumbnails on hover. Create a static copy that consists of only static images of our thumbnails and place them at the bottom of our layer stack.
  2.  Put the components that increase on hover, and their default states will result in zero capacity.
  3.  It will create an illusion of being carried on top of other thumbnails.

Check out the video below.

 



 

We would love to hear your opinion about this tutorial and what you created. Please reply to this post to share your observations with us.

Happy Designing! 

 

 

Thanks,

Harshika

      3 replies

      A
      AbiDavid90
      Participant
      February 18, 2025

      I’ve tried a similar approach in Adobe XD, and this workaround is a great way to achieve the hover effect since we can’t change the Z-index dynamically. By placing a static copy of the thumbnails at the bottom of the layer stack and setting the hover components to zero opacity by default, the illusion works well for my business branding . It gives the effect of the image being lifted above the rest when hovered over.

      It’s a clever technique, especially for those working within XD’s current limitations. Looking forward to more creative solutions like this in the community!

      creative explorer
      Community Expert
      creative explorerCommunity Expert
      Community Expert
      February 23, 2025

      @AbiDavid90 one could just hide the layer in the layers. On default is whatever you want to see, and when you create a hover state, you click to unhide the layer that you don't want to see

      m
      Farhad Malegam
      Farhad Malegam
      Participant
      July 24, 2024

      Great tutorial! Akin’s approach to creating a hover effect in Adobe XD is both innovative and practical. I’m excited to try this technique in my own projects and see how others implement it too!

       

      Kind regards,

      Sydney Digital Agency | A Custom Web Design Agency

      SEO SpecialistSydney Digital Agency
      MahmudMammadov
      MahmudMammadov
      Participant
      October 11, 2023

      Thanks

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices