title: Div taking up full width of page
body: <p>I've implemented a hover state that overlays text when a div is hovered. </p>
  
  <p>Here is the code - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.desktop-image {
    position: relative;
  }
  
  .img_description {
    position: absolute;
    top: -13%;
    bottom: 0;
    left: 0;
    right: 0;
    color: #000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .7s, visibility .7s;
  }
  
  .desktop-image:hover .img_description {
    visibility: visible;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="images" class="misma"&gt;
    &lt;div class="desktop-image"&gt;
      &lt;img src="http://via.placeholder.com/200x200"&gt;
      &lt;p class="img_description"&gt;This image looks super neat.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="mobile-image-misma"&gt;
      &lt;img src="http://via.placeholder.com/100x100"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The problem</strong>
  When I inspect the page I notice that the div <code>.desktop-image</code> is taking up the full width of the screen (see pic).</p>
  
  <p><a href="https://i.stack.imgur.com/yWGl0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yWGl0.png" alt="enter image description here"></a></p>
  
  <p><strong>Question</strong> 
  How can I make this div wrap to the size of the actual image, so that the hover state is ONLY implemented when that image is hovered, as opposed to when anywhere within the <em>blue section</em> is hovered.</p>
  
  <p>Thanks</p>