Here is the CSS code that I am using, defined in the React Material-UI withStyles method:
const styles = (theme: Theme) => {
return ({
display: {
transition: theme.transitions.create('transform')
},
displayHighlight: {
transform: 'translateX(50%)',
position: 'fixed',
top: 0,
zIndex: 10,
transition: theme.transitions.create('transform')
}
}) as any;
}
The CSS styles are being applied to cards within a masonry grid in a virtualized React component. Here is how the card render function handles this:
return <div className={this.state.expanded ? this.props.classes.displayHighlight : this.props.classes.display}>
<Card style={{ width: this.props.columnWidth }}>
<PreviewRenderer columnWidth={this.props.columnWidth}
embedVideo={this.props.submission.embedVideo}
imagePreview={this.props.submission.preview} />
<CardHeader
style={{ textAlign: 'left' }}
title={this.props.submission.title}
/>
<CardContent>
<div style={{ width: '40px', float: 'right' }}>
{this.props.submission.id && <RatingBar submissionId={this.props.submission.id.toString()} />}
</div>
<Button onClick={() => this.setState({ expanded: !this.state.expanded })}>Expand</Button>
</CardContent>
</Card>
</div>
I would like the card to scale up and move to the center of the browser window when someone clicks on 'expand'.
Is it possible to achieve this effect purely with CSS or by passing screen dimensions to the defined CSS classes for custom positioning?