Cacher is the code snippet organizer for pro developers

// portfolio item
.portfolio-item {
    
    a {
        display: block;
        position: relative;
        margin: 0 auto;
        max-width: 400px;
    }
    
    // portfolio item hover
    &-hover {
        position: absolute;
        background: fade(@color, 90%);
        .transition-all;
        .size(100%);
        opacity: 0;
        
        &:hover {
            opacity: 1;
        }
        
        // portfolio item center icon
        &-content {
            position: absolute;
            text-align: center;
            .size(100%,42px);
            color: #fff;
            top: 45%;
        }
    }
    
    // portfolio item image
    img {
        min-width: 100%;
        height: 412px;
    }
    
    // portfolio item caption
    &-caption {
        background: #fff;
        padding: 25px;
        max-width: 400px;
        margin: 0 auto;
        
        h4 {
          
        }
        p {
          
        }
    }
}

<div class="col-md-4 col-sm-6 portfolio-item">
  <a href="#">
    <div class="portfolio-item-hover">
        <div class="portfolio-item-hover-content">
            <i class="fa fa-plus fa-3x"></i>
        </div>
    </div>
    <img class="img-responsive" src="img/portfolio/pf_img_1.jpg" alt="">
  </a>
  <div class="portfolio-item-caption text-center">
    <h4>Ebony & Ivory</h4>
    <p class="text-muted">Branding</p>
  </div>
</div>
<!-- /.portfolio-item -->