Pseudo elemet not showing with overflow-hidden CSS

I might get a bit of flack for asking this question so I'll say this right away. The previous answers on Stackoverflow haven't worked.

I'm trying to have an image in the shape of a hexagon and for that, I want to have a div as the parent of the image.

I then used a CSS hexagon generator and added the CSS to my div element with overflow: hidden.

The problem: The only part of the hexagon that I can see is the main rectangle (the non-pseudo element) and not the two triangles on either side (the pseudo-element). I tried everything from changing position, getting rid of the animations, and adding the overflow: hidden to different parts.

CSS:

.image-container {
    overflow: hidden;
    position: relative;
    background-color: #64C7CC;
    width: 300px; 
    height: 173.21px;
    margin: 86.60px 0;
    
    &::after, &::before {
        // overflow: hidden;
        content: "";
        // position: absolute;
        width: 0;
        border-left: 150px solid transparent;
        border-right: 150px solid transparent;
    }
    &::before {
        bottom: 100%;
    }
    &::after {
        top: 100%;
        width: 0;
    }
    // // overflow: hidden;
    // z-index: 100;
    // position: relative;
    // background-color: aqua;
    // @extend hexagon;
}


.image-container img {
    position: absolute;
    top: -10px;
    left: -300px;
}

HTML:

<div className="image-container" data-aos="fade-right">
   <img src='images/profile-pic.JPG' alt="profile pictures"/>
</div>

Result:

I hope you can help as I've been sitting at this for quite a while. If you need clarification please just add a comment and ill respond tomorrow morning.

from Recent Questions - Stack Overflow https://ift.tt/2WIbkog
https://ift.tt/3mRvLd3