Текст на изображении при наведении зависит от яркости фильтра

Question

Я пытаюсь создать изображения с надписью на них, но при наведении на них яркость изображения снижается, но это не должно влиять на текст. Могу ли я достичь этого только с помощью CSS?

@mixin easeOut {
  transition: all 0.3s ease-out;
}

.team-pics {
  display: flex;
  flex-wrap: wrap;
  div {
    width: 33%;
    img {
      display: block;
      width: 100%;
      padding: 1rem;
      @include easeOut;
    }
    .team-pic-caption {
      opacity: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 1rem;
      @include easeOut;
      color: #fff;
    }
    &:hover {
      filter: brightness(.5);
      .team-pic-caption {
        opacity: 1;
      }
    }
  }
}

<div class="team-pics">
  <div>
    <img src="https://images.unsplash.com/photo-1515550833053-1793be162a45?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31a23f7d7e8b0e43153da6565aa7157e&auto=format&fit=crop&w=500&q=60" />
    <div class="team-pic-caption">
      <h3>Josh Garwood</h3>
      <p>Co-Founder and Technical Director</p>
    </div>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1513267096918-a2532362a784?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f971c866a1e22a858a0c2ea72274838c&auto=format&fit=crop&w=500&q=60" />
    <div class="team-pic-caption">
      <h3>Jason Benjamin</h3>
      <p>Co-Founder and Marketing Director</p>
    </div>
  </div>
</div>

https://codepen.io/yubind/pen/mGWQBr

Answer 1

У меня есть несколько потенциальных решений для вас

Вот первое (фон будет размытым, но текст останется прежним, конечно, код адаптируется к вашим потребностям):

#imgtext {
  position: relative;
  float: left;
  width: 300px;
  padding: 30px;
  margin: 15px;
  border-radius: 20px;
  height: 150px;
  overflow: hidden;
}

#imgtext:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(https://upload.wikimedia.org/wikipedia/en/e/e4/Blank_cd.png) no-repeat center;
  background-size: cover;
}

#imgtext:hover:after {
  -webkit-filter: blur(5px);
}

p {
  font-size: 3em;
  color: red;
  text-align: center;
}

<div>
    <div id="imgtext">
      <p>Hello<p>
    </div>
</div>

Другое обозначено в этой скрипке (текст появляется только при наведении, когда изображение исчезает)

.wrapper {
  position: relative;
  padding: 0;
  width: 150px;
  display: block;
}

.text {
  position: absolute;
  top: 0;
  color: #f00;
  background-color: rgba(255, 255, 255, 0.8);
  width: 150px;
  height: 150px;
  line-height: 1em;
  text-align: center;
  z-index: 10;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.text img {
  top: 20px;
  position: relative;
}

.text:hover {
  opacity: 1;
}


}
img {
  z-index: 1;
}

<a href="#" class="wrapper">
  <span class="text">      
  
  <img src="http://prologicit.com/wp-content/uploads/2012/07/160px-Infobox_info_icon_svg-150x150.png" width="30" height="30"><br><br><br>  

       
          "Photo"<br>
          Made:1999<br>
          By: A. Miller<br>
          150x150px
          
         </span>
  <img src="http://lorempixel.com/150/150">

</a>

Мне нравится Скрипка анимации непрозрачности , но она может быть выше того, что вы ищете ...