How can I create two clickable intersecting Images?

Question

I'd like to make two clickable images, one for video and one for PDF. They would be intersecting, and the PDF button is behind the Video button, just like in the image below:

So far, I haven't come across a similar solution on the internet, but I'd like to know if it's possible to create it without any interruptions, where both are easily clickable, and how I could do so.

I think this is the answer you are looking for: https://stackoverflow.com/a/1997397/12772355 — nhannt201, Jul 13 '21 at 10:14

score 0 · Answer 1 · answered Jul 13 '21 at 10:07

Use position relative and absolute on your video and pdf respectively and wrap them inside a container that uses position :relative aswell

This should do the trick :

.container {
/* What you need */
position : relative;

/* the code below is only for this example */
width : 300px;
margin-top : 150px;
}

.video {
/* What you need */
position : relative;
z-index : 2;

/* the code below is only for this example */
width : 300px;
height : 300px;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
background-color : red;
}

.pdf {
/* What you need */
position : absolute;
top : -100px; /* change value to desired position */
right : -100px; /* change value to desired position */
z-index : 1;

/* the code below is only for this example */
width : 150px;
height : 200px;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
background-color : blue;

}

<div class="container">
 <div class="pdf">pdf</div>
<div class="video">video</div>
 
</div>

score 0 · Accepted Answer · answered Jul 13 '21 at 11:43

A combination of position absolute and z-index will do the needy:

#video {
  left: 100px;
  top: 75px;
  width: 250px;
  height: 150px;
  z-index: 10;
  background: lightblue;
}
#pdf {
  left: 300px;
  top: 25px;
  width: 75px;
  height: 100px;
  z-index: 1;
  background: red;
}
.tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id = 'video' class = 'tile'>VIDEO</div>
<div id = 'pdf' class = 'tile'>PDF</div>

How can I create two clickable intersecting Images?

2 Answers2