A CodePen by Ian Soper.

index.html

<div class="ribbon">
  <span class="left"></span>
  <div class="front">This is Something</div>
  <span class="right"></span>
</div>

<div class="content">
<ul class="portfolio" >
  <li id="item1">
    <h2>Portfolio Item1</h2>
    <a  href="#item1"><img src="http://placehold.it/400x300" alt=""></a>
 	<li id="item1">
    <h2>Portfolio Item1</h2>
    <a  href="#item1"><img src="http://placehold.it/400x300" alt=""></a>
   <li id="item1">
    <h2>Portfolio Item1</h2>
    <a  href="#item1"><img src="http://placehold.it/400x300" alt=""></a>
    <li id="item1">
    <h2>Portfolio Item1</h2>
    <a  href="#item1"><img src="http://placehold.it/400x300" alt=""></a>
  
</ul>	
  	
</div>

script.js

$(".portfolio img").click(function() {
    $(".portfolio li").removeClass("active");
    $(this).parent().toggleClass("active");
});

style.less

@import url(http://fonts.googleapis.com/css?family=Six+Caps);

body {
  font-family: 'Six Caps', sans-serif;   
  background-color: #666;
  background: linear-gradient(20deg, left,
    #666 42%,
    #454545 42%,
    #454545 58%,
    #666 58%,
    #666 100%);
  z-index: -1;
}

.ribbon {
  position: relative;
  font-size: 100px;
  width: 600px;
  height: 124px;
  margin: 130px auto 100px auto;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  transform: skew(0, 20deg);

} 

.front {
  display: block;
  background: #ccc;
  z-index: 10;
  padding: 10px 15px;
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  text-shadow: 0 -2px 0 #fff;
  
  &:before {
     content: "";
    width: 60px;
    background-color: #333;
    height: 60px;
    transform: skew(0, 36deg);
		position: absolute;
    z-index: -1;
    left: 0;
    bottom: -44px;
  }
  
  &:after {
   	content: "";
	  width: 60px;
    background-color: #333;
    height: 60px;
    transform: skew(0, -36deg);
		position: absolute;
    z-index: -1;
    right: 0;
    bottom: -44px;
  }
  
}

span {
 	width: 100px;
  height: 144px;
  display: block;
  position: absolute;
  top: 40px;
  z-index: -3;
  border-top: 3px solid #333;
	border-bottom: 3px solid #333;
 
}

.left {
      left: -52px;
  
  &:before {
    width: 80px;
    height: 144px;
    display: block;
    border: 72px solid #adadad;
    border-left: 40px solid transparent; 
	  height: 0;
    width: 0;
    content: "";
    position: absolute;
  }
  &:after {
   	border: 75px solid #333;
    border-left: 42px solid transparent; 
    right: -12px;
  	left: auto;
    top:-3px;
    content: "";
    position: absolute;
    z-index: -11;

  }
    
  }

.right {
 	right: -40px;
  left: auto;
  
  &:before {
    width: 80px;
    height: 144px;
    display: block;
    border: 72px solid #adadad;
    border-right: 40px solid transparent; 
	  height: 0;
    width: 0;
    content: "";
    position: absolute;
  }
  &:after {
   	border: 75px solid #333;
    border-right: 40px solid transparent; 
    right: -16px;
  	left: auto;
    top:-3px;
    content: "";
    position: absolute;
    z-index: -11;

  }
}

.content {
  position: relative;
  transform: skew(0, 20deg);
  clear: both;
 	margin: 0 auto 0 auto;
  width: 900px;
  
  ul, li {
   	list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  ul {
   	margin: 0 auto; 
  }
  
  li {
   	float: left; 
		margin-right: 20px;
    text-align: center;
    position: relative;
  }
  
}

.portfolio {
  img {
    box-shadow: 4px 5px 7px rgba(0,0,0,.4);
    border-radius: 12px;
  }  
  
  li {
    width: 400px;
    height: 400px;
    position: relative;
    transition: all .1s;
  }
  
  li.active { 
        transform: skew(0, -20deg);

    img {
      position: absolute;
      width: 600px;
      height: auto;
      z-index: 200;
      position: relative;
      transition: all .1s;
    }
  }
  
  
  
 
}