0

i'm struggling about this: i need to put 4 elements inline keeping image and text straight but skewing the container. I tried many different solutions (pseudo elements, skew positive and negative, clip path, ecc. They works with a single image but i can't handle multiple elements and find a solution. I also would need to keep images as background images because of responsiveness.

This is the screenshot to what i get:

enter image description here

I need to make straight image and text keeping the paralelogram in the container like this:

enter image description here

Here's my code:

HTML

<div class="image-front-container" style="height: 199px;">   
    <div class="image-front background-image-formatter fill" style="background-image:url('http://mysite/image1.jpg')">
    </div>
    <a href="/mysite/mypage" class="front-main-anchors"></a>
    <div class="image-front-title"><span>Image 1</span></div>   
</div>
Image 2 Image 3

CSS

.image-front-container {
    border: 10px solid transparent;
    width: 25%;
    float: left;
    /*-webkit-transform: skew(-20deg);*/
    /*-moz-transform: skew(-20deg);*/
    /*-o-transform: skew(-20deg);*/
    /*-webkit-clip-path: polygon(0 4%, 95% 0, 99% 100%, 4% 93%);*/
    height: 400px;
}

.image-front {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    transition: background-image .5s ease-in-out;
    -webkit-transition: background-image .5s ease-in-out;
    -moz-transition: background-image .5s ease-in-out;
}

.image-front-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    -moz-box-shadow: inset 0 30px 0 rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: inset 0 30px 0 rgba(0, 0, 0, 0.85);
    box-shadow: inset 0 30px 0 rgba(0, 0, 0, 0.85);
}

Thank you!

SBO
  • 623
  • 2
  • 8
  • 22
  • Harry, this is not a duplicate because i need to use images and not background. If you skew a background with a monochromatic color you will not see any rotating effect but if you do on image you will get exactly my problem. – SBO Jan 18 '17 at 09:34
  • The answer still is the same. Apply reverse skew. If that approach doesn't work then maybe adding a snippet in the question illustrating how that approach doesn't work will help. – Harry Jan 18 '17 at 09:43
  • https://jsfiddle.net/SBOE/ucpdpv49/1/ what i'm doing wrong? – SBO Jan 18 '17 at 10:02
  • Sorry, but aren't the image and text straight in that example? What is it that you are expecting? Your container has no background color or anything and so it's skew isn't visible to the eye. – Harry Jan 18 '17 at 10:08
  • I updated my question. I need the image cutted with a parallelogram shape. thank you – SBO Jan 18 '17 at 10:14
  • I haven't edited your fiddle because it takes a long time to debug that but you can have a look at [this fiddle](https://jsfiddle.net/01f16181/) that I created just now and see what I mean. (Note: The child element's width should be a bit higher because the parent is being skewed and you don't want empty spaces.) – Harry Jan 18 '17 at 10:24
  • 1
    Damn, i was missing overflow: hidden. OMG, many thanks Harry! – SBO Jan 18 '17 at 10:50
  • You're welcome @SBO. Happy to help :) – Harry Jan 18 '17 at 10:51
  • Another question. i need to put centered text at the bottom of the image. The problem is that having 140% width will not center in the visible area but over the 140%. how can i do that? – SBO Jan 18 '17 at 11:11

0 Answers0