Flexbox: image with opacity overlay

a test to make an overlay for images

HTML

<div class="container">
  
  <div class="galleryservice">
    <a class="gallery-item" href="#"><img src="http://www.placeimg.com/330/265" alt="Headshot of George Washington"><span class="text-wrapper"><span class="name">George Washington</span><span class="title">Principal</span></span></a>


  </div>
  
</div>

CSS

body {
  font-family: arial, sans-serif;
}

.container {
  max-width: 1125px;
  margin: 0 auto;
}

.galleryservice {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: 330px;
  height: 265px;
  margin: 5px;
  text-decoration: none;
  
}

.gallery-item img {
  position: absolute;
   -webkit-filter: brightness(30%);
}

.gallery-item:hover img:hover {
  position: absolute;
   -webkit-filter: brightness(100%);
}

.text-wrapper {
  position: relative;
  width: 330px;
  height: 265px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
  opacity: 0;
}

.text-wrapper:hover {
  transition: all 0.8s ease;
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.name {
  font-size: 1.5em;
}


/* Because there is no hover on a touch devide, we need to move the text to the bottom of the image and display it by default */

@media only screen and (max-width: 1024px) {
  .text-wrapper {
    opacity: 1;
    justify-content: flex-end;
    text-shadow: 1px 1px 1px #000;
  }
  .title {
    margin-bottom: 1em;
  }
}