title: Responsive image overlay with hover effect on another html element
body: <p>1st problem: The text overlay is displayed when i hover on the image, but i want that the overlay would be displayed when i hover on the span which has the "point" class, how to make it?</p>
  
  <p>2nd problem: The text overlay isn't responsive, it doesn't fit on the image size and i want that when i resize my image the text overlay would resize with the image, how can i make it?</p>
  
  <p>I would be thanful for a javascript, bootstrap, css or a different answer!</p>
  
  <p>Demo: <a href="http://jsfiddle.net/0qgcn2uu/9/" rel="nofollow">http://jsfiddle.net/0qgcn2uu/9/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;span class="point"&gt;&lt;/span&gt;
  
  &lt;div class="caption"&gt;
      &lt;img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" /&gt;
      &lt;div class="caption__overlay"&gt;
          &lt;div class="caption__overlay__content"&gt;
              &lt;img id="hello" class="caption__media" src="http://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png"&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.caption {
      position: relative;
      overflow: hidden;
      -webkit-transform: translateZ(0);
  }
  .caption::before {
      content:' ';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      transition: background .35s ease-out;
  }
  /* This block of code is working. When i hover on my img, it gets the overlay
  .caption:hover::before {
      background: rgba(248, 214, 215, .5);
  }
  */
  
  /* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
   .point:hover + .caption::before {
      background: rgba(248, 214, 215, .5);
  }
  .point {
      position: absolute;
      display: block;
      height: 25px;
      width: 25px;
      border-radius: 30px;
      background-color: black;
      z-index: 1;
  }
  .caption__overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 10px;
      color: white;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      transition: -webkit-transform .35s ease-out;
      transition: transform .35s ease-out;
  }
  .caption:hover .caption__overlay {
      -webkit-transform: translateY(0);
      transform: translateY(0);
  }
  </code></pre>