title: How to get a image width when screen size changes in react?
body: <p>I had created a image hover,Some text in screen when i hover cover the text image appears the image is responsive,i want to set the text width equal to image width when changing the screen size the text width should change with image width,Please help me 
  <a href="https://github.com/ciar4n/imagehover.css/" rel="nofollow noreferrer">i'm using this css lib</a>
  <strong>How can i create the function to get the width of the image and set it to text width?</strong></p>
  
  <pre><code>const About = () =&gt; {
      return (
          &lt;div className="bucket"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-8 mainOne"&gt;
                  &lt;figure class="imghvr-shutter-in-horiz"&gt;
                  &lt;h1 className=" text animated bounceInLeft delay-2s"&gt;A Front-End Dev...&lt;/h1&gt;
                      &lt;figcaption&gt;
  
                      &lt;img 
                   className="responsive"
                      src="https://netbramha.com/wp-content/uploads/2016/12/senior-front-end-developer-openings-1.gif"/&gt;
                      &lt;/figcaption&gt;
                  &lt;/figure&gt;
  
                  &lt;/div&gt;
                  &lt;div class="col-sm-4 mainTwo"&gt;
                      &lt;div className="col"&gt;sub one&lt;/div&gt;
                      &lt;div className="col"&gt;sub two&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> .responsive {
      width: 100%;
      height: auto;
    }
  
  </code></pre>