Highlight Sensitive Inclined Images

Question

I am trying to create something like this:

I managed to create this:

But I don’t see the first and last image being straight

Live example on bootply

This is my code: HTML:

<div class="container">
<div class="col-md-12">
    <div>
        <div class="row">
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a></div>
            <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a></div>
        </div>
    </div>
</div>

CSS

.col-xs-3{ 
      transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
      -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
      padding-left: 5px;
      padding-right: 5px;
}

Images should occupy 100% of the page width

Thank you so much

Avi

Answer 1

Thank you all

Here's how I solved it:

bootply

HTML:

<div class="container">
<div class="col-md-12 overfh">
    <div>
        <div class="row contec-row">

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3 contec-col">
                <a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a>
                <div class="contec-bg"> 
                    <div class="contec-content">
                      <div class="contec-txt"> vdsvsd vddsv vsdv</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

CSS

    .contec-row{
        margin-left: -73px;
        margin-right: -73px;
    }

    .overfh {
        overflow: hidden;
    }

    .contec-col{ 
        transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
        -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
        padding-left: 5px;
        padding-right: 5px;
    }

    .contec-bg {
        width:calc(100% - 23px);
        height:30%;
        position: absolute;
        bottom: 0;
    }
    .contec-content {
        padding-top:5%;
        width:100%;
        height:100%;
        text-align: center;
        vertical-align: middle;
        background:rgba(0,0,0,.75);
        color:white;
        opacity:0;
        transition: opacity .8s ease-in-out;
    }

    .contec-txt{
        transform: translate3d(0, 0, 0) skew(20deg, 0deg);
        -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
    }

    @media (max-width: 1200px) {
        .contec-bg {
            width:calc(100% - 10px);
        }
    }

JS:

    $(document).ready(function(){
     $(".contec-col").mouseover(function(){
      $(this).find('.contec-content').css("opacity", "1");
     });

   $(".contec-col").mouseleave(function(){
       $(this).find('.contec-content').css("opacity", "0");
     });
});

Answer 2

You can use clip-pathto cut the first and last images at an angle:

CSS

.col-xs-3 {
    padding: 0;
}

.col-xs-3:first-of-type {
    clip-path: polygon(0 0, 100% 0%, 72% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 72% 100%, 0% 100%);
}

.col-xs-3:not(:first-of-type):not(:last-of-type) { 
    position: relative;
    transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.col-xs-3:nth-of-type(2) {
    left: -1.2%;
}

.col-xs-3:nth-of-type(3) {
    left: 1.2%px;
}

.col-xs-3:last-of-type {
    clip-path: polygon(28% 0, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(28% 0, 100% 0%, 100% 100%, 0% 100%);
}

HTML:

 <div class="container">
        <div class="col-md-12">
            <div>
                <div class="row">
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item4.png" alt="Image" class="img-responsive"></a></div>
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item3.png" alt="Image" class="img-responsive"></a></div>
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item2.png" alt="Image" class="img-responsive"></a></div>
                    <div class="col-xs-3"><a href="#x"><img src="http://plugins.themescode.com/wp-content/uploads/2015/11/item1.png" alt="Image" class="img-responsive"></a></div>
                </div>
            </div>
        </div>
    </div>

Here's an example: http://www.bootply.com/8uqV7aNEbo .