Semantic UI React - Adding Reveal Effect to Images in Cards

问题

The title says it all. Is it possible to add the Semantic UI Reveal effect to Images in Cards?

This would be a very nice feature when designing ecommerce websites with Semantic UI + React, for example for having two images for each product, when hovering. Moreover, when using Semantic UI without React, it is totally possible.

回答1:

It seems like the React component has a bug where its not specifying the width of the "visible" element in the Reveal. The "hidden" element does have a width of "100%" specified.

See that offset?

So, when we add that in, the positioning of the "visible" component correctly overlays the "hidden" as demo'd in this codesandbox:

https://codesandbox.io/s/v8mylv1p3

Alternatively, if you had the images formatted to take up full-width to begin with, then it probably works fine.

回答2:

I answer myself because I have found a (not very smart, I admit it) workaround for this problem. Currently, it is working with the following versions of Semantic UI + Semantic UI React.

Last update in March 2018:

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

In my component, I simply get rid of the direct <Image> or <Reveal> components and use a plain <div> JSX component (containing two Images to emulate the Reveal behaviour):

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

This results in a minimum impact with the desired funcionality :)

来源：https://stackoverflow.com/questions/49439999/semantic-ui-react-adding-reveal-effect-to-images-in-cards

标签

javascript

reactjs

semantic-ui