How to visible content on

I am working on a website where I need to use different trapezoid shape of images, but I cannot visible content on box. This's image: http://i.stack.imgur.com/Lq8zl.jpg

Here my code: HTML:

<div class="box-trapezoid">
    <div class="box-content">
      <strong>Lorem Ipsum</strong>
      <h4>Bridgestone</h4>
      <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit sed.</p>
      <a href="" title="">More</a>
    </div>
</div>

CSS:

box-trapezoid {
    position: relative;
    min-height: 200px;
    margin-top:20px;
    width: 100%;
    padding:10px 40% 0px 20px;
    background: url(http://i.stack.imgur.com/Lq8zl.jpg) no-repeat center;
    background-size: cover;
    border:1px solid #afafaf;
}
.box-trapezoid:before {
    position: absolute;
    z-index: 2;
    content: ' ';
    width: 50%;
    height: 100%;
    top:0;
    left: 0;
    background: #fff;
}
.box-trapezoid:after {
    position:absolute;
    z-index: 2;
    left:35%;
    display:inline-block;
    width:30%;
    background-color:#fff;
    height:100%;
    content: ' ';
    top: 0px;
    transform:skew(-20deg,0deg);
    -ms-transform:skew(-20deg,0deg); /* IE 9 */
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
    z-index:2;
    overflow:hidden;
}
.box-trapezoid .box-content {
    z-index: 3;
}

Thanks you in advance !