title: Display modal on img hover in CSS
body: <p>This might be confusing but I'm essentially trying to open a modal with an image when someone hovers over that specific image in say a table or something.  I have it where if you hover over that image it makes it larger, but I want it to open within a modal.</p>
  
  <p>Here is a snippet of my code</p>
  
  <pre class="lang-js prettyprint-override"><code>RenderItems(){
  var items = this.state.ItemList;
  var allItems = this.state.AllItems;
  var rows = [];
  
  for(let i = 0; i &lt; items.length; i++){
              if(this.state.ItemSelected == "All Items"){
                  rows.push(
                      &lt;tr style={{backgroundColor: '#B7BCDF'}} id={items[i].ID} onClick={this.RowClick.bind(this)} key={i}&gt;
                          &lt;td  className="PartImage" style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}&gt;
                              &lt;img src={PartImage} alt="" width="50%"&gt;&lt;/img&gt;
                          &lt;/td&gt;
  
                          &lt;td style={{width: '111px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}&gt;
                              {items[i].PartName}
                          &lt;/td&gt;
  
                          &lt;td  style={{width: '94px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}&gt;
                              {items[i].Vendor}
                          &lt;/td&gt;
  
                          &lt;td  style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}&gt;
                              {items[i].PartNumber}
                          &lt;/td&gt;
  
                          &lt;td  style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}&gt;
                              ${items[i].Price.toFixed(2)}
                          &lt;/td&gt;
  
                          &lt;td  style={{width: '100px'}} id={items[i].ID} onClick={this.RowClick.bind(this)}&gt;
                              {items[i].QuantityOnHand}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  )
              }
  
  return (
  
              &lt;div className="TableScroll"&gt;
                  &lt;table className="TableRows"&gt;
                      &lt;tbody&gt;
                          {rows}
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
          );
  
  
  }
  
    render(){
     return(
      &lt;div className="container"&gt;
        &lt;div className="PartImageModal"&gt;
           &lt;div className="ImageModalContent"&gt;
               &lt;img src=""&gt;I'm an Image in a modal&lt;/img&gt;
           &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
     );
  
    }
  </code></pre>
  
  <p>And here is my css for this portion</p>
  
  <pre class="lang-js prettyprint-override"><code>.PartImage img:hover{
  
  }
  
  .PartImageModal{
      position: relative;
      width: 35%;
      height: 45%;
      margin-right: auto;
      margin-left: auto;
      margin-top: 10%;
      background-color: white;
      display: none;
  }
  
  .ImageModalContent{
      width: 100%;
      height: 100%;
      display: block;
  }
  
  </code></pre>
  
  <p>My first thought was that I could change my class PartImage img:hover to:</p>
  
  <pre class="lang-js prettyprint-override"><code>.PartImage img:hover{
   .PartImageModal{
     display: block;
   }
  }
  </code></pre>
  
  <p>but this is not allowed in CSS.</p>
  
  <p>If anyone has any ideas on how I could accomplish this, I would appreciate it! Thanks!</p>