<div class="content">
    <div class="photos">
      <div class="thumbnails">
        <img src="https://cdna.artstation.com/p/assets/images/images/017/387/624/large/melissa-myra-nocturnal.jpg?1555772159" alt"">
        <div class="black"></div>
        <div class="title">Serenity</div>
      </div>

      <div class="thumbnails">
        <img src="https://cdnb.artstation.com/p/assets/images/images/017/345/917/large/melissa-myra-russiandoll-web.jpg?1555587439" alt="digital portrait of woman holding her face with a red background">
        <div class="black"></div>
        <div class="title">Russian Doll</div>
      </div>

      <div class="thumbnails">
        <img src="https://cdna.artstation.com/p/assets/images/images/017/345/770/large/melissa-myra-gretel-by-melissamyraf-dbcsi6v.jpg?1555586817" alt="digital portrait of Gemma Arterton as Gretel">
        <div class="black"></div>
        <div class="title">Gretel</div>
      </div>
    </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Lato);

* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

body {
  width: 100%;
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.content {
  width: 100%;
}

.photos {
  width: 95%;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
}

.thumbnails {
  width: calc(100% / 3);
  height: 500px;
  margin: 10px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s;
}

.thumbnails img {
  width: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.black {
  text-align: center;
  background: #000;
  background-blend-mode: multiply;
  color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: .7;
}

.title {
  color: #fff;
  font-size: 2em;
  align-self: center;
  position: absolute;
  z-index: 10;
}

.black, .title {
  transition: opacity .3s;
}

.thumbnails:hover {
  cursor: pointer;
  transform: scale(1.05);
  z-index: 20;
}

.thumbnails:hover .black,
.thumbnails:hover .title {
  opacity: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.