title: how to link to a specific div from an image
body: <p>i am currently working on a school project. 
  <a href="https://i.stack.imgur.com/tT2p3.jpg" rel="nofollow noreferrer">please click HERE to see my page</a></p>
  
  <p>i have 3 bottle images that i like to be clickable so that if i click a bottle, it will redirect me to a div.</p>
  
  <p>here's what my html looks like:</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>.zero {
    height: 20%;
    background-color: #f8f5f2;
    color: 000b29;
    text-align: center;
    font-size: 80px;
  }
  
  .secOne {
    background-image: url("../img/hero/premium.jpg");
  }
  
  .sub_sectionOne {
    height: 20%;
    background-color: #000B29;
    color: #d70026;
    text-align: center;
    font-size: 80px;
  }
  
  .secTwo {
    background-image: url("../img/hero/black.jpg");
  }
  
  .sub_sectionTwo {
    height: 20%;
    background-color: #D70026;
    color: #f8f5f2;
    text-align: center;
    font-size: 80px;
  }
  
  .secThree {
    background-image: url("../img/hero/goldhero.jpg");
  }
  
  .sub_sectionThree {
    height: 20%;
    background-color: #edb83d;
    color: #d70026;
    text-align: center;
    font-size: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section"&gt;
    &lt;video id="bgvid" autoplay loop poster="img/Snapshot/Beach-Ball.jpg" alt="people playing soccer at the beach"&gt;
         &lt;source src="img/Mp4/Beach-Ball.mp4" type="video/mp4" /&gt;
         &lt;source src="img/Ogv/Beach-Ball.ogv" type="video/ogv" /&gt;
         &lt;source src="img/Webm/Beach-Ball.webm" type="video/webm" /&gt;
     &lt;/video&gt;
    &lt;!-- bottle navigation --&gt;
    &lt;div class="bottle"&gt;
      &lt;h1&gt;Beast Mode On&lt;/h1&gt;
      &lt;div class="bottle-nav"&gt;
        &lt;img src="img/bottles/125_bluelightningbottle.png" alt="Oztonic Premium Energy Drink Bottle"&gt;
        &lt;img src="img/bottles/125_redlightningbottle.png" alt="OzTonic Black Energy Drink Bottle"&gt;
        &lt;img src="img/bottles/125_yellowlightningbottle.png" alt="OzTonic Gold Energy Drink Bottle"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- sections --&gt;
    &lt;div class="zero"&gt;
      &lt;h2&gt;Which Beast Are You?&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="section secOne"&gt;&lt;/div&gt;
    &lt;div class="sub_sectionOne"&gt;
      &lt;h2&gt;I'm a Premium Beast&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="section secTwo"&gt;&lt;/div&gt;
    &lt;div class="sub_sectionTwo"&gt;
      &lt;h2&gt;I'm a Black Beast&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="section secThree"&gt;&lt;/div&gt;
    &lt;div class="sub_sectionThree"&gt;
      &lt;h2&gt;I'm a Gold Beast&lt;/h2&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>so i like to get my 125_bluelightningbottle.png to redirect me to 
  div class="section secOne. my 125_redlightningbottle.png to redirect me to
  div class="section secTwo. and my 125_yellowlightningbottle.png to redirect me to div class="section secThree.</p>
  
  <p>those divs with class are styled by these (please see css codes below) and as you can see, my images are set as a background-img: url("..img/hero/black.jpg'); and so on...</p>
  
  <p>however this is what i tried and i have a problem doing this:
  if i use the  and wrap the bottle.png with it and put
   and wrap my div class="section secOne" all my background-img disappears.</p>
  
  <p>your help is appreciated in advance</p>