पृष्ठभूमि के रूप में फॉन्टवॉसम आइकन

.portfolio-container,
   .portfolio-list {
      width: 100%;
    }

  .portfolio-list {
       margin: 0;
       padding: 0;
        list-style: none;
  }

    .portfolio-list li {
        position: relative;
       display: block;
       float: left;
       width: 20%;
  }

.portfolio-list li img {
       display: block;
       width: 100%;
      margin: 0;
      vertical-align: top;
  }

 /*.portfolio-list a:after {
       content: '\A';
       position: absolute;
       width: 100%;
      height: 100%;
      top: 0;
      left: 0;
       background: rgba(0, 0, 0, 0.6) url(http://robgolbeck.com/demos/hover-overlay/images/happy.png) center center no-repeat;
      opacity: 0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
   }*/
    .portfolio-list a:after {
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6) center center no-repeat;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    content: '\f067';
    font-family: FontAwesome;
    font-size: 30px
    }

  .portfolio-list a:hover:after {
       opacity: 1;
    }

   @media all and (max-width: 1080px) {
       .portfolio-list li {
              width: 25%;
      }
    }

   @media all and (max-width: 879px) {
        .portfolio-list li {
            width: 33.3333333%;
     }
   }

   @media all and (max-width: 560px) {
          .portfolio-list li {
            width: 50%;
        }
    }

 @media all and (max-width: 480px) {
      .portfolio-list li {
            width: 70%;
             float: none;
            clear: both;
            margin: 0 auto;
    }
   .portfolio-list a:after {
         width: 100%;
       }
.portfolio-list li img {
            width: 100%;
            margin: 0 auto;
    }
  }

  .group:before,
   .group:after {
       content: "";
        display: table
   }

   .group:after {
       clear: both
  }

   .group {
       zoom: 1
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="portfolio-container group">
    <ul class="portfolio-list group">
            <li>
                    <a href="#">
                            <img src="http://robgolbeck.com/demos/hover-overlay/images/thumb1.jpg">
                    </a>
            </li>

</ul>