语义UI反应 - 为卡片中的图像添加显示效果

Question

标题说明了一切。 是否可以在Semantic UI Reveal effect中将Images添加到Cards？

在使用Semantic UI + React设计电子商务网站时，这将是一个非常好的功能，例如，当悬停时，每个产品都有两个图像。 此外，在使用没有React的语义UI时，it is totally possible。

Answer 1

似乎React组件有一个错误，它没有指定Reveal中“visible”元素的宽度。 “隐藏”元素 的宽度为“100％”。

看到那个偏移？

因此，当我们添加它时，“可见”组件的定位会正确覆盖“隐藏”，如此代码框中的演示：

https://codesandbox.io/s/v8mylv1p3

或者，如果您将图像格式化为占据全宽，那么它可能正常工作。

Answer 2

我自己回答是因为我找到了一个（不太聪明，我承认）这个问题的解决方法。目前，它正在使用以下版本的Semantic UI + Semantic UI React。

2018年3月的最后更新：

"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"

在我的组件中，我只是删除直接<Image>或<Reveal>组件，并使用普通的<div> JSX组件（包含两个Images来模拟Reveal 1}}行为）：

...
<Card>
    <div className={'ui slide masked reveal image'}>
        <Image src='/img/products/1.jpg' className={'visible content'} />
        <Image src='/img/products/2.jpg' className={'hidden content'} />
    </div>
    <Card.Content>
        <Card.Header textAlign={'center'}>
            Product name
        </Card.Header>
    ...

这导致对所需功能的影响最小：）