diff --git a/src/Components/CardsAnimation.css b/src/Components/CardsAnimation.css index b2c60d192969a5808f2927bfe87799dbcad458ed..fd96f2332d65f4f78d85918e6cb2e5230689becd 100644 --- a/src/Components/CardsAnimation.css +++ b/src/Components/CardsAnimation.css @@ -1,4 +1,4 @@ -.animation{ +.animatiOff{ position: absolute; display: flex; background-color: inherit; @@ -8,9 +8,10 @@ padding-top: 20px; transition: left 1s; transition-delay: 0.5s; + z-index: 1; } -.animationOn{ +.animatiOn{ position: absolute; display: flex; left: 0px; @@ -19,4 +20,5 @@ height: 100%; padding-top: 20px; transition: left 2s; + z-index: 1; } diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js index 14fb02055cf27658170441beff9f7b6b7cab9d12..66b9cab782ef6fc0f08bb4227a7d5ecf4f7c8837 100644 --- a/src/Components/CollectionCard.js +++ b/src/Components/CollectionCard.js @@ -36,11 +36,9 @@ class RenderThumbs extends Component { if (this.props.thumbs) { var array = this.props.thumbs.slice(0,4); return( - <div> <Row> {array.map(thumb => <Col style={{padding: "0px"}} md={6}><img key={thumb.id} height="80" src={apiDomain+thumb}/> </Col>)} </Row> - </div> ); } return(null); @@ -50,26 +48,26 @@ class CollectionCard extends Component { constructor(props){ super(props); this.state={ - userStyle: "animation" + userStyle: "animatiOff" }; } onHover(){ - this.setState({userStyle: "animationOn"}); + this.setState({userStyle: "animatiOn"}); } onIddle(){ - this.setState({userStyle: "animation"}) + this.setState({userStyle: "animatiOff"}) } render(){ return ( <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} > <Container style={{padding:"0px", backgroundColor: "#673ab7"}}> + <div className={this.state.userStyle}>{this.props.author}</div> <RenderThumbs thumbs={this.props.thumbnail}/> <div style={authorStyle}> <Typography variant="body2" color="textSecondary" component="p">{this.props.author}</Typography> <Typography variant="title" color="textSecondary" component="p" >{this.props.name}</Typography> </div> <div style={pictureStyle}> fotinha </div> - <div className={this.state.userStyle}>{this.props.author}</div> </Container> <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}> diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js index 08ea299588b87f9dc2f7641380129d812d526bef..403fef9031a1637ef148115a3427fc00e835d202 100644 --- a/src/Components/ResourceCard.js +++ b/src/Components/ResourceCard.js @@ -36,7 +36,7 @@ class ResourceCard extends Component { super(props); this.state={ thumbnail: null, - userStyle: "animation", + userStyle: "animatiOff", }; } @@ -50,10 +50,10 @@ class ResourceCard extends Component { } } onHover(){ - this.setState({userStyle: "animationOn"}); + this.setState({userStyle: "animatiOn"}); } onIddle(){ - this.setState({userStyle: "animation"}) + this.setState({userStyle: "animatiOff"}) } render(){ this.renderType(this.props.type)