Untitled

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Galería</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="galeria">
      <img src="img/1.jpg" alt="" />
      <img src="img/2.jpg" alt="" />
      <img src="img/3.jpg" alt="" />
      <img src="img/4.jpg" alt="" />

      <img src="img/5.jpg" alt="" />
      <img src="img/6.jpg" alt="" />
      <img src="img/7.jpg" alt="" />
      <img src="img/8.jpg" alt="" />
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
}

body {
  background: #000500;
}

.galeria {
  width: 100%;
}

.galeria img {
  vertical-align: top;
  width: 230px;
  margin: 20px;
  padding: 5px;
  display: inline-block;
  border: 1px solid #484848;
  opacity: .5;
}

.galeria img:hover {
  opacity: 1;
  border: 2px solid #fff;
}