Image hover with transparent color overlay

[carolineh76238118]

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!

[Akin Gundogan]

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.

[vascos85326211]

Hello! Im having the same issue. But im still not able to proceed. I watched your video, great explanation but the most important part I cant hear it ahahah. Can you explain it again please. Here is what Im trying to do.

[Akin Gundogan]

Hi @vascos85326211, as I said the audio wasn't great since in that video but I think this tutorial can be great for what you want to do: https://www.youtube.com/watch?v=WYsjk064ATQ Let me know if you have any questions, if I do a tutorial with decent audio about this I'll sure update you! 

[carolineh76238118]

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?

[Akin Gundogan]

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

[carolineh76238118]

Beautiful Akin! Your English is great too. Thank you so much:)

[Akin Gundogan]

You're welcome Caroline and thanks for your kind words 🙂