0

Image hidden by ::before: Image hidden by ::before

.footer::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 0;
height: 0;
background: none;
border-bottom: 5vw solid transparent;
border-left: 100vw solid #ffffff;
z-index: 0;}

To get a triangle like shape I made the border of left border white. But I want an image over the div like

How I want image to be:

How I want image to be

But it is hiding behind the ::before

 img {
z-index: 10;
margin: 5px;}

How to get image above the border of ::before?

Footer is

 .footer {
height: 200px;
width: 100%;
left: 0;
background-image: linear-gradient(-315deg, #53BF9D 48%, #195CA0);
position: absolute;
bottom: 0;}

HTML

    <div class="footer">
    <img src="logo.png" width="200">
</div>
ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
Nimish Agrawal
  • 511
  • 1
  • 5
  • 11

1 Answers1

0

just give your img position : relative because z-index doesn't work without position relative or absolute

Abdelillah Aissani
  • 3,058
  • 2
  • 10
  • 25