• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Image hover with transparent color overlay

Explorer ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

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!

Views

2.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2023 Feb 12, 2023

Copy link to clipboard

Copied

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.Screen Shot 2023-02-13 at 13.33.49.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

LATEST

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! 

Season 2 Master Designs. You should learn and you should expand your knowledge. Nowadays it is very easy to learn from your home comfort home (No Classes, No Finance, No other problem etc). Master Designs will also make the videos that you suggest or any kind of software. We will do research for ...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 07, 2021 Nov 07, 2021

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 08, 2021 Nov 08, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 13, 2021 Nov 13, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 14, 2021 Nov 14, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines