Control Background Brightness with CSS

image-brightness.scss

.image {
  width: 200px;
  height: 200px;
  background: no-repeat center center;
  background-image: url(https://images.unsplash.com/photo-1464823063530-08f10ed1a2dd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f0976bd6d336e2aeb5e06dbc366515ea&auto=format&fit=crop&w=1650&q=80);
  background-size: cover;
  position: relative;
    &:after {
      content: "";
      display: block;
      background: rgba(255,255,255,0.5); //this is your brightness control
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
}