centered view demo button

centered view demo button.markdown

centered view demo button

A Pen by Steve Lombardi on CodePen.

License.

index.html

<div class="container">
  <div class="row col-md-9">
  <a href=""><img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9340/error-401.png" alt="" /></a>
  </div>
</div>

style.scss

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  transform: translateX(-50%);
}

a {
  position: relative;
  display: inline-block;
  background-color: #000;

  &:before {
    content: 'View Demo';
    font-size: 18px;
    display: block;
    color: #000;
    @include vertical-align(absolute);   
    background-color: #ccc;
    padding: 6px 12px;
    border-radius: 24px; 
    opacity: 0;
    transition: opacity .3s;
  }
  img {
    // filter: brightness(50%);
    border: 1px solid #c0c0c0;
    transition: opacity .2s;
    opacity: 1;
  }
  &:hover {
    &:before {
      opacity: 1;
    }
    img {
      opacity: .2;
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />