animações iniciais dos cards

src/Components/CollectionCard.css → src/Components/CardsAnimation.css

 .animation{
   position: absolute;
   display: flex;
-  background-color: gray;
-  opacity: 0.6;
+  background-color: inherit;
   width: 0%;
   height: 100%;
   padding-top: 20px;
   transition: width 2s;
   visibility: hidden;
+  transition-delay: 1s;
 }
 
 .animationOn{
   position: absolute;
   display: flex;
-  background-color: gray;
-  opacity: 0.6;
+  background-color: inherit;
   width: 100%;
   height: 100%;
   padding-top: 20px;

src/Components/CollectionCard.js

 import React, {Component} from 'react';
+import './CardsAnimation.css';
 import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -32,16 +33,24 @@ class CollectionCard extends Component {
     super(props);
     this.state={
       thumbnail: algumaCoisa,
+      userStyle: "animation",
     };
-
+  }
+  onHover(){
+    this.setState({userStyle: "animationOn"});
+  }
+  onIddle(){
+    this.setState({userStyle: "animation"})
   }
   render(){
    return (
-     <Card>
-     <Container style={{padding:"0px"}}>
-       <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
-       <div style={authorStyle}> Autor Autor <br/> authro</div>
-       <div style={pictureStyle}> fotinha </div>
+     <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
+     <Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
+     <div style={authorStyle}> Autor Autor <br/> authro</div>
+     <div style={pictureStyle}> fotinha </div>
+     <div className={this.state.userStyle}>aaaaaaaaaaa</div>
+     <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
+
      </Container>
        <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
        </CardContent>

src/Components/ResourceCard.js

 import React, {Component} from 'react';
-import './CollectionCard.css';
+import './CardsAnimation.css';
 import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -30,10 +30,6 @@ import Video from '@material-ui/icons/OndemandVideo';
 const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
 {label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
 
-const thumbStyle={
-
-};
-
 class ResourceCard extends Component {
   constructor(props) {
     super(props);
@@ -59,7 +55,7 @@ class ResourceCard extends Component {
   this.renderType(this.props.type)
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
-       <Container style={{padding:"0px"}}>
+       <Container style={{padding:"0px", backgroundColor: "#ff7f00"}}>
        <div className={this.state.userStyle}>aaaaaaaaaaa</div>
        <img  src={this.state.thumbnail} alt="thumbnail do recurso"/>
        </Container>