displaying child div on hover on parent div in react js
<p>Hello :) I am relatively new to react js, i am trying to apply animation on a div that is a child of another div, parent div " <code>portfolio-product-item</code> " displays featured image extracted from wp rest api, and child div " <code>portfolio-product-item-details</code> " has the contents of the post. </p>

<p>What i want to do is display the content when hovered over the featured image in parent div , my code is like this , how can i achieve it?</p>

<pre><code>    import React from 'react';
    import Home from './Home';
    require ('../../app.css');
    require ('../../animate.min.css');
    class Portfolio extends React.Component{
      render(){
       console.log(this.props.data.length);
       var contents=[];
       for (var i = 0; i &lt; this.props.data.length; i++) {
       contents.push(
         &lt;div className="col-xs-12 col-md-4"&gt;
            &lt;div id="portfolio-product-item" &gt;
              &lt;img src={this.props.data[i].featured_image} /&gt;
              &lt;div ref= "productDetails" id ="portfolio-product-item-details"  dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} /&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        );
    }
    return(
      &lt;div className = "container"&gt;
          &lt;div className="row"&gt;
            &lt;section className="portfolio"&gt;
               &lt;h1&gt;Our Latest Work&lt;/h1&gt;
               &lt;p id="below-header"&gt;These are some of the works that has been keeping us busy over the years. See for yourself what we can do.&lt;/p&gt;
               &lt;div className="col-xs-12 "&gt;
                  {contents}
               &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    )
  }
}
export default Portfolio;
</code></pre>