Make multiple oblique-lined images in horizontal div clickable

Question

not really sure if the title is well formed for my question, but it was the best i could do :)

I'm trying to create a horizontal bar with with multiple images, where all of them are oblique against the next one.. (see this image).

I'm not even sure if it's possible with CSS.. (and even though if it's possible when it scales up and down..)..

I want each picture in this horizontal bar clickable.. AKA : If you hover the samurai, an :hover effect applies and it's clickable (a href: )..

doğukan · Accepted Answer · 2019-02-22T21:33:42.050

4

Like this?

body {
  margin:0
}

.cont {
  width:80%;
  height: 70%;
  display:flex;
  perspective:1000px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
  display:flex;
}

.cont a {
  display:block;
  height: 100%;
  flex:1;
  background-size:cover;
  transform: skew(25deg);
  position: relative;
  overflow: hidden;
}

.cont a::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(-25deg);
   background-size:cover;
   background: url("https://picsum.photos/600/700");
   position: absolute;
}

.cont a:nth-child(2)::before {
  background: url("https://picsum.photos/600/740");
}

.cont a:nth-child(3)::before  {
  background: url("https://picsum.photos/600/720");
}

.cont a:nth-child(4)::before   {
  background: url("https://picsum.photos/600/750");
}

<div class="cont">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

edited Feb 22 '19 at 21:33

answered Feb 22 '19 at 21:04

doğukan

23,073
13
57
69

Answers which explain how code works are downvoted less often than those which simply spoonfeed code to users... – Heretic Monkey Feb 22 '19 at 21:14
the image are distored ... – Temani Afif Feb 22 '19 at 21:15
you have applied skew to them, so they are skewed/distorted .. in the quetion the image are fine – Temani Afif Feb 22 '19 at 21:17
I understand the thing though, but yea.. And.. @TemaniAfif got a point.. how do i do this without getting the images distorted ? Aka : cutting parts of the images instead of rotating them.. – Terje Nygård Feb 22 '19 at 21:17
1

@TerjeNygård check the duplicate question – Temani Afif Feb 22 '19 at 21:18
I will @TemaniAfif :) Thanks for contributing!.. much appreciated.. – Terje Nygård Feb 22 '19 at 21:18
I can explain why i didn't find this duplicate : As i already mention in the post, i had issues with explaining _exactly_ what i was after (might be that i'm norwegian :))... If i had known what to search for more thoroughly.. i would have found this.. :) – Terje Nygård Feb 22 '19 at 21:20

Make multiple oblique-lined images in horizontal div clickable

1 Answers1