I'm doing a Meet the Team (utilizing, with much appreciation, a template taken from this community) interaction that involves a hover state where the names appear and the pictures are greyed out. Everything should be working correctly, as all the settings are aligned, but for some reason not all of the hover states work correctly: some are fine and others are shades too dark! Am I doing something wrong?
Sorry you're running into a problem with this. I can certainly see the behavior in your images, but I'm not seeing it when I utilize your Review link. I recorded a Peek of myself going through your course here.
What browser are you you using and/or what steps should I be taking to replicate?
So, I sort of faked a solution. I noticed that the color photos would not stay transparent when a grayscale was applied to them, but would when their original color was maintained. So, I used that as a temporary solution (the one you now see on Review is a newly published draft).
The question still remains, however: why did the original grayscale not work? And for the person icons, why did that transparency not work, either, except for the first page (BD)? The source file is the best one to look at.
Alyssa, that was entirely helpful! Thanks so much for helping me out with this. Seems like a bit of a newbie move, I guess. Do you think there's a reason why the outline of the image covered the text in the first place? How might I avoid doing this in the future?
The Hover state is additive on top of the Normal state, so you'll see both states at the same time. In other words, if the icon is used in the Normal state, you'll see it in other states, too.
To get around this, simply cut and paste the icon as I did in the video, and then you should see only the object in the Hover state.
8 Replies
Hi Andrew
it looks like the transparency set is different on some of the images
Hey Wendy. That doesn't seem to be the issue. What I'm looking at are these:
This is what the transparency is set at. And the this is what the preview looks like:
Unclear what's happening here.
And the same thing here!
It's still unclear to me what's going on with the image.
Hi Andrew,
Sorry you're running into a problem with this. I can certainly see the behavior in your images, but I'm not seeing it when I utilize your Review link. I recorded a Peek of myself going through your course here.
What browser are you you using and/or what steps should I be taking to replicate?
Hi Leslie,
So, I sort of faked a solution. I noticed that the color photos would not stay transparent when a grayscale was applied to them, but would when their original color was maintained. So, I used that as a temporary solution (the one you now see on Review is a newly published draft).
The question still remains, however: why did the original grayscale not work? And for the person icons, why did that transparency not work, either, except for the first page (BD)? The source file is the best one to look at.
Thanks again!
Hi Andrew!
It looks as if the icon/picture Normal state is appearing on top of the one in the Hover state. There's an easy way to fix that...here's how!
I hope that helps. :)
Alyssa, that was entirely helpful! Thanks so much for helping me out with this. Seems like a bit of a newbie move, I guess. Do you think there's a reason why the outline of the image covered the text in the first place? How might I avoid doing this in the future?
So glad that was helpful, Andrew!
The Hover state is additive on top of the Normal state, so you'll see both states at the same time. In other words, if the icon is used in the Normal state, you'll see it in other states, too.
To get around this, simply cut and paste the icon as I did in the video, and then you should see only the object in the Hover state.
This discussion is closed. You can start a new discussion or contact Articulate Support.