<!-- Tutorial from Design Shack 
https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ -->

<! DOCTYPE html>
<html>
  <head>
    <title>Standard Thumbnail Grid</title>
  </head>

  <body>
    <div>
     <ul>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
       <li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
     </ul>
    </div>
    
  </body>

</html>
/* lazy browser reset */

* {
  margin: 0;
  padding: 0;
}

body {
  background: #333;
}

div {
  width: 600px;
  margin: 20px auto;
}

/* list styles */

ul {
  list-style: none;
}

li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;
  
  transition: all .3s ease;
}

li img:hover {
  -webkit-box-shadow:0px 0px 5px #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.