title: How to put links and text over grid items in a photo grid
body: <p>I've made a responsive photo grid where each grid item serves as a container for an image with a text overlay. A link then spans over the grid item for navigation purposes. The grid item takes images with different aspect ratios, preserves the aspect ratio and clips off excess to fill the grid box.</p>
  
  <p>What is the best way to do this using just CSS grid or flexbox?
  I have posted two different methods below and both work, but which is most correct? Is it ok to just insert an image inside an <code>&lt;a&gt;</code> tag? Is using absolute positioning a bad thing in 2019? Should I use <code>ul</code> instead of divs?</p>
  
  <p><strong>Absolute positioning:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
   font-family:arial;
   font-size: 100%;
   color: #CCC;    
  }
  *{box-sizing: border-box;}
  
  .fotogrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   grid-gap: 1em;
  }
  .tile {
   position: relative;
   width: 100%;
   border: 1px solid black;
  }
  
  .tile img {
   object-fit: cover;
   display: block;
   height: 100%;
   width: 100%;
  }
  
  
  .tile h4 {
   position: absolute;
   left: 0;
   top: 0;
   margin: 0;
   background-color:#000;
   padding:10px 14px;    
   opacity: .8; 
  
  }
  
  .tile a {
   position: absolute;
   top: 0;
     left: 0;
     right: 0;
     bottom: 0;
   margin: 0;
      text-decoration: none;
   width: 100%;
   height: 100%;
   z-index: 1;
        
  }
  
  .tile:hover {   
   border: 1px solid #0066FF;   
   opacity: .55;      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="fotogrid"&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="tile"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="tile"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
   &lt;div class="tile"&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
    &lt;img src="https://www.placebear.com/300/200"/&gt;
    &lt;h4&gt;project title&lt;/h4&gt; 
   &lt;/div&gt;
   &lt;div class="tile"&gt;
    &lt;a href="#"&gt;&lt;/a&gt;
    &lt;img src="https://www.placebear.com/300/200"/&gt;
    &lt;h4&gt;project title&lt;/h4&gt;  
   &lt;/div&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
    &lt;img src="https://www.placebear.com/300/200"/&gt;
    &lt;h4&gt;project title&lt;/h4&gt;
   &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Image wrapped in link:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
   font-family:arial;
   font-size: 100%;
   color: #CCC;    
  }
  *{box-sizing: border-box;}
  
  .fotogrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   grid-gap: 1em;
  }
  .tile {
   position: relative;
   width: 100%;
   border: 1px solid black;
  }
  
  .tile img {
   object-fit: cover;
   display: block;
   height: 100%;
   width: 100%;
  }
  
  
  .tile h4 {
   position: absolute;
   left: 0;
   top: 0;
   margin: 0;
   background-color:#000;
   padding:10px 14px;    
   opacity: .8; 
  
  }
  
  .tile:hover {   
   border: 1px solid #0066FF;   
   opacity: .55;      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="fotogrid"&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;/a&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;/a&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="tile"&gt;
          &lt;a href="#"&gt;
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;/a&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;         
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;/a&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="tile"&gt;
          &lt;a href="#"&gt;         
          &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;/a&gt;
          &lt;h4&gt;project title&lt;/h4&gt;
      &lt;/div&gt;
   &lt;div class="tile"&gt;
    &lt;a href="#"&gt;   
    &lt;img src="https://www.placebear.com/300/200"/&gt;
    &lt;/a&gt;
    &lt;h4&gt;project title&lt;/h4&gt; 
   &lt;/div&gt;
   &lt;div class="tile"&gt;
    &lt;a href="#"&gt;   
    &lt;img src="https://www.placebear.com/300/200"/&gt;
    &lt;/a&gt;
    &lt;h4&gt;project title&lt;/h4&gt;  
   &lt;/div&gt;
   &lt;div class="tile"&gt;
          &lt;a href="#"&gt;         
    &lt;img src="https://www.placebear.com/300/200"/&gt;
          &lt;/a&gt;
    &lt;h4&gt;project title&lt;/h4&gt;
   &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S. Is there anyway to center the text overlay and make it expand horizontally to the grid item box?</p>