.img_slide {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  display: inline-block;
  position: relative;
  transform: translateZ(0px);
  vertical-align: middle;
    border-radius:50%;
  cursor:pointer
}
.img_slide {
  background: #1a1a1a;
  width:max-content;
  transition-duration: 0.8s !important;
  clip-path:   polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
}
/* from top_left */
.mtop_left.img_slide {
    clip-path:  polygon(60% 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 60%);
    transition-duration: 0.6s !important;
}
.img_slide:before {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    content: "";
    height: 0;
    left: 0;
    right:0px;
    margin-inline:auto;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition-duration: 0.8s;  
    transition-property: width, height;
    width: 0;
    z-index: 1000;
    border-radius: 0% 3% 75% 5%;
    opacity:0;
}
.mtop_left.img_slide:before {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #ffffff00 45%, #383736 50%, #1a1a1a 56%, #1a1a1a 80%) repeat scroll 0 0;
    height: 60%;
    width: 60%;
    right:unset;
    opacity:1
}

/* from top_right */

.mtop_right.img_slide:before {
    background: rgba(0, 0, 0, 0) linear-gradient(225deg, #ffffff00 45%, #383736 50%, #1a1a1a 56%, #1a1a1a 80%) repeat scroll 0 0;  /*display smooth transitions between two or more specified colors */
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    height: 60%;
    width: 60%;
    left:unset;
    border-radius: 0% 5% 5% 75%;
    opacity:1;
}

.mtop_right.img_slide {
    clip-path: polygon(0 0, 40% 0, 100% 60%, 100% 100%, 0 100%, 0% 50%);
    transition-duration: 0.8s !important;
}


/* from bottom_left */

.img_slide:after {
    bottom: 0;
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
    content: "";
    height: 0;
    left: 0;
    right:0;
    margin:auto;
    pointer-events: none;
    position: absolute;
    transition-duration: 0.8s;
    transition-property: width, height;
    width: 0;
    border-radius: 0% 70% 5% 75%;
    opacity:0
}
.mbottom_left.img_slide {
  background: #1a1a1a;
  width:max-content;
  transition-duration: 0.8s !important;
  clip-path:polygon(0 0, 100% 0, 100% 50%, 100% 100%, 75% 100%, 0% 25%);

}
.mbottom_left.img_slide:after {
    height: 70%;
    width: 70%;
    right:unset;
    background: rgba(0, 0, 0, 0) linear-gradient(45deg, #ffffff00 45%, #383736 50%, #1a1a1a 56%, #1a1a1a 80%) repeat scroll 0 0; 
    opacity:1
}



/* from bottom_right */

.mbottom_right.img_slide:after {
    background: rgba(0, 0, 0, 0) linear-gradient(315deg, #ffffff00 15%, #383736 50%, #1a1a1a 56%, #1a1a1a 80%) repeat scroll 0 0; 
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
    left:unset;
    transition-duration: 0.8s;
    transition-property: width, height;
    border-radius: 70% 3% 5% 5%;
    height: 70%;
    width: 70%;
    opacity:1;
}

.mbottom_right.img_slide {
    clip-path: polygon(0 0, 100% 0, 100% 32%, 32% 100%, 0 100%, 0% 50%);
    transition-duration: 0.8s !important;
}