Grid images spray all over the place, can I tame them?

HTML & CSS
15

I posted an example of this in your other thread: On the hunt for a pure css slider but need some advice - #15 by Erik_J
It’s the second list, not a table but the view-image code is the same. The images can’t get focus on their own, but wrap them in an anchor tag that can recieve focus:

  <!-- Sitepoint grid help-->
  <div class="picgrid">
    <ul>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
    </ul>
    <ul>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href=""#><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
    </ul>
    <ul>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
      <li><a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt=""/></a></li>
    </ul>
  </div>

Took the css from your codepen and added the AP click to view ruleset so you can play with it and see if you can use it: :smile:

/* Sitepoint grid layour help */
.picgrid {
  position:relative;
  display: table;
  border-spacing: 16px 16px;
  background-color: #bdf;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
.picgrid ul {
  display: table-row;
}
.picgrid ul li {
  display: table-cell;
  padding: 0%;
}
.picgrid ul li img{
  border:0;
  width:150px;
}
.picgrid ul li a:focus img{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    margin:auto; /* on AP, it centers between the given positions */
    width:80%;
    max-width:800px;
    height:auto;
}

Then your footer-thumbs css width/height rules should change now with the real thumb images in the html:

/* css footer help from sitepoint */
.footer-thumbs {
  display: table;
  margin: auto;
  padding: 0;
  list-style: none;
  background: tan;
}
.footer-thumbs li {
  display: table-cell;
  text-align: center;
}
.footer-thumbs img {
  display: block;
  padding: 0;
  border: 1px solid white;
  width: 99%;
  height: auto;
  vertical-align: top;
  background: peru;
}

With the above alternative you don’t need script just to show/hide larger images with a mouseclick on the thumbs.