Image hover with transparent color overlay

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

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