title: Loop in CSS and HTML? Enlarge/popup an image upon hovering but have 1000 photos
body: <p>Every thread that I have searched so far involves hovering over a single image, requiring one img src, which the below code can solve. However I have 1000 photos to hover over and this is extremely tedious and impractical with my current solution. I'm quite new to CSS and HTML but I essentially want to create a loop to apply this hover command over and over. If you look at the HTML my intent should be clear.</p>
  <p>Below is the code that I have so far:</p>
  <p>CSS:</p>
  <pre><code>.hover-title {
      display: inline-grid;
      pointer-events: auto;
      cursor: pointer;
      z-index:-1;
  }
  
  .hover-image {
      visibility: hidden;
  }
  
  body:not(.mobile) .hover-title:hover + .hover-image {
      visibility: visible;
      pointer-events: none;
  }
  
  .hover-image {
      display: flex;
      position: fixed;
      top: 0%;
      left: 0%;
      transform: translate(40%, 40%);
      transform: scale(.5.5);
      z-index: -999;
      pointer-events: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  
  /* Change width and height to scale images */
      width: 70vw;
      height: 70vh;
  }
  
  .hover-image img {
      max-width: 100% !important;
      max-height: 100% !important;
      width: auto !important;
      height: auto !important;
      margin-bottom: 0;
      left: 50%;
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;hover-title&quot;&gt;{image 1 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 1}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 2 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 2}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 3 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 3}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 4 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 4}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 5 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 5}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 6 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 6}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 7 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 7}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 8 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 8}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 9 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 9}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 10 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 10}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 10 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 10}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 11 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 11}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 12 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 12}&lt;/div&gt;
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 13 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 13}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 14 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 14}&lt;/div&gt; 
  
  &lt;div class=&quot;hover-title&quot;&gt;{image 15 scale=&quot;5&quot;}&lt;/div&gt;
  &lt;div class=&quot;hover-image&quot;&gt;{image 15}&lt;/div&gt;
  </code></pre>