animação card Recursos

src/Components/CollectionCard.css

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

src/Components/ResourceCard.js

 import React, {Component} from 'react';
+import './CollectionCard.css';
 import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -29,11 +30,16 @@ 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);
     this.state={
       thumbnail: this.props.thumbnail,
+      userStyle: "animation",
     };
 
   }
@@ -43,14 +49,20 @@ class ResourceCard extends Component {
       this.setState({thumbnail: aux.thumb});
     }
   }
-  handleHover(){
-    console.log("aaa");
+  onHover(){
+    this.setState({userStyle: "animationOn"});
+  }
+  onIddle(){
+    this.setState({userStyle: "animation"})
   }
   render(){
   this.renderType(this.props.type)
    return (
-     <Card onMouseEnter={this.handleHover()}>
-       <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
+     <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
+       <Container style={{padding:"0px"}}>
+       <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"}}>
          <Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
            {this.props.name}