CODEWITHSUNDEEP
htmlcss
Yubin Kim
Yubin Kim

Reputation: 85

Text on image on hover affected by filter brightness

I'm trying to create images with texts on them but when it hovers the brightness of the image goes down yet it shouldn't affect the text. Can I achieve that just with 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

Upvotes: 1

Views: 1183

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28573

I have a few potential solutions for you

Here is the first (background will blur, but text will remain the same, code is adaptable to your needs of course):

#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>

Another is outlined in this fiddle (the text only appears on hover, when the image fades)

.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>

I like this animate opacity fiddle but it may be over what you're looking for...

Upvotes: 1

Related Questions