I can't seem to get a hover state with a pass through overlay to work on an image.
The default state is the image at 100% opacity at normal.
I'd like the hover state to have transparent color overlay. As soon as I try to assign a hover state the violet disappears or I can't assign the hover or the default and the hover become the same.
The selected state has a keyline border.
Any help will be appreciated!
Hi Caroline, if I'm not missing something, I think it's because you haven't created "hover" state properly, I created a component from a masked image, added a hover state, drew a transparent rectangle over image in hover state, and then selected component's default state, and then clicked plus button to create a new state (renamed it as "Selected") and selected the "Sleected" state and then added a rectangle consists of only a border, you can see the sanple file here: https://www.dropbox.com/s/seq0zgl5peiuh73/component-hover-test.xd?dl=0 Hope this helps.
Thanks Akin! Yours works great but I am still having trouble. I've uploaded an additional file in the dropbox.
On the 2 smaller screens everything works great when a keyline is used. The transparency seems to be the hang-up.
Did you create the orginal component like A or B?
A) draw a rectangle at the desired size, drag and drop an image into the rectangle
B) drop the image in, draw a mask shape over the top to mask the image to the exact size
Then right click or command k to create component. Add hover state.
With option "A" there is no fill option in the menu when "hover" is selected. If I choose hover and then slide the transparency bar, the defaut state changes to the hover state transparency.
With option "B" the fill option is available but does not affect the image dramatically. The image gets darker or muted so if the image is lighter, the color fill takes more effect. If the image tranparency is changed to 75% it is the same issue as A. Thoughts?
Hi Caroline, I tried to explain the way I created the component in this qıuick video I recorded (sorry for the background noise since my fans were going crazy and as you can tell I'm not a native English speaker but I tried to explain as clear as possible) Hope this helps, happy designing! https://www.dropbox.com/s/7d0kclsoclal6so/2021-11-08%2015-06-08.mp4?dl=0
Beautiful Akin! Your English is great too. Thank you so much:)
You're welcome Caroline and thanks for your kind words 🙂