Highlight Hover

HTML5 Clickable Boxes, No JS required

by Tracy Ridge

HTML

<body>
  <div class="grid">
    <div class="col-12">

      <h1>HTML5 Method</h1>
    </div>
    <div class="col-12">
      <p>Here we use the HTML 5 method to make the entire box clickable without having to rely on Javascript. Before HTML5 this wouldn't have been possible and would have resulted in Validation errors. If you require another link inside the current &lt;a&gt;
        tag then the jQuery method would be better.</p>
    </div>

    <div class="grid">
      <a class="box col thumbnail " href="https://www.pexels.com/photo/red-logo-phone-england-64011/" title="English Telephone">
        <div>
          <img src="http://lorempixel.com/400/200" alt="Telephone">
          <h2>I love old Telephones</h2>
        </div>
      </a>

      <a class="box col thumbnail " href="https://www.pexels.com/photo/3-tan-short-coated-puppy-on-gray-dirt-during-daytime-26128/" title="Doggies">
        <div>
          <img src="http://lorempixel.com/400/200" alt="Dogs">
          <h2>These dogs are cute</h2></div>
      </a>

      <a class="box col thumbnail " href="https://www.pexels.com/photo/lights-tree-cactus-christmas-tree-76081/" title="Cactus">
        <div>
          <img src="http://lorempixel.com/400/200" alt="Cactus">
          <h2>Do you feel a little prick?</h2></div>
      </a>

      <a class="box col thumbnail " href="https://www.pexels.com/photo/iphone-notebook-pen-working-34202/" title="Mac">
        <div>

          <img src="http://lorempixel.com/400/200" alt="Mac">
          <h2>A Mac Lovers Paradise</h2>
        </div>
      </a>
    </div>

   
      </div>
</body>

CSS

/*! ==========================================================================
    GRIDLEX
    Just a Flexbox Grid System
========================================================================== */

[class*="grid"] {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0 -0.5rem;
}

.col,
[class*="col-"] {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
}

.col {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.grid.col,
.grid[class*="col-"] {
  margin: 0;
  padding: 0;
}


/************************
    HELPERS SUFFIXES
*************************/

[class*="grid-"][class*="-noGutter"] {
  margin: 0;
}

[class*="grid-"][class*="-noGutter"] > [class*="col"] {
  padding: 0;
}

[class*="grid-"][class*="-center"] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

[class*="grid-"][class*="-right"] {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  margin-left: auto;
}

[class*="grid-"][class*="-top"] {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  -ms-grid-row-align: flex-start;
  align-items: flex-start;
}

[class*="grid-"][class*="-middle"] {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

[class*="grid-"][class*="-bottom"] {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
}

[class*="grid-"][class*="-reverse"] {
 ...