I am experiencing a strange problem with Bootstrap 4 when using dropdown. I have additional actions listed in the dropdown menu that are supposed to be visible when clicking on the "plus icon". However, when I do click on the "plus icon", the dropdown ends up hidden behind other elements on the page. I've tried various solutions to fix this issue, including those related to dropdown menus in the navbar, but so far nothing has worked for me.

Here is a snippet of my code:

PS: To see the full code, you can check out this CodePen link.

Thank you in advance for any help!

The Issue:

https://i.sstatic.net/F0gUu.png

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 gallery-gutter-fix zindex-fix">
    <div class="gallery-img-wrapper-3">
        <a href="#" class="d-block h-100">
            <img class="thumbnail-basic_372 mx-auto"
                 src="https://vignette.wikia.nocookie.net/thementalist/images/e/ea/Jane-patrick-jane-32078790-457-535.jpg/revision/latest?cb=20150414045955"
                 alt="some text">
        </a>
        <div class="after-overlay">
            <div class="d-flex flex-wrapper align-items-center">
                <div class="d-flex mr-auto">
                    <div class="d-flex justify-content-end align-items-center">
                        <div class="dropdown">
                                        <span data-toggle="dropdown">
                                            <i class="fas fa-plus-circle"></i>
                                        </span>
                            <div class="dropdown-menu">
                                <div class="d-block w-100">
                                    <h4 class="text-uppercase">Add To</h4>
                                </div>
                                <div class="custom-filled-checkbox w-100">
                                    <label for="morning1">
                                        <input id="morning1" name="morning1" type="checkbox">
                                        <i class="helper"></i>Morning
                                    </label>
                                </div>
                                <div class="custom-filled-checkbox w-100">
                                    <label for="evening1">
                                        <input id="evening1" name="evening1" type="checkbox">
                                        <i class="helper"></i>Evening
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex">
                    <h6 class="text-uppercase">some name</h6>
                </div>
                <div class="d-flex ml-auto">
                    <div class="d-flex justify-content-end align-items-center">
                        <i class="far fa-heart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

CSS:

$base-gradient-light:rgba(94, 53, 177,0.6);
$white: #fff;
.search-cover-basic {
  .gallery_wrapper {
    padding-bottom: 8px;
    padding-top: 8px;
  }
}

/*custom gutter for gallery*/
.row {
  .gallery-gutter-fix {
    padding-right: 8px;
    padding-left: 8px;
  }
}
.zindex-fix {
  z-index: 99;
}
.gallery-img-wrapper {
  border: 1px solid #DDDEDF;
  border-radius: 0.25rem;
  height: 150px;
  /*only when you need images with gradient overlay*/
  &.overlay-gradient {
    position: relative;
  }
  .after-overlay {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 50px;
    display: none;
    color: $white;
    a {
      color: $white;
      text-decoration: none;
    }
    //dropdown menus for add to playlist
  }
  &:hover {
    .after-overlay {
      display: block;
      background: $base-gradient-light;
      font-weight: bold;
      .flex-wrapper {
        padding: 5px 15px;
        height: 100%;
      }
      h6 {
        font-weight: bold;
        margin-bottom: 0.1rem;
      }
    }
  }
  /*only when you need images with gradient overlay ends*/
  .thumbnail-basic {
    object-fit: cover;
    width: 100%; /*change from 150px to 100%*/
    height: 149px;
    display: block;
    max-width: 100%;
    /*in case you need to fix portrait images*/
    &.portrait {
      object-fit: contain;
    }
  }
}
.gallery-img-wrapper-3 {
  border: 1px solid #DDDEDF;
  border-radius: 0.25rem;
  height: 372px;
  a {
    color: $white;
    text-decoration: none;
  }
  /*only when you need images with gradient overlay*/
  &.overlay-gradient {
    position: relative;
  }
  .after-overlay {
    position: relative;
    bottom: 48px;
    left: 0;
    width: 100%;
    height: 50px;
    display: none;
    color: $white;
    .dropdown-menu {
      padding:18px 12px;
      opacity:1 !important;
      z-index: 10000;
    }
  }
  .after-overlay {
    display: block;
    background: $base-gradient-light;
    font-weight: bold;
    .flex-wrapper {
      padding: 5px 15px;
      height: 100%;
    }
    h6 {
      font-weight: bold;
      margin-bottom: 0.1rem;
    }
  }
  /*only when you need images with gradient overlay ends*/

  .thumbnail-basic_372 {
    object-fit: cover;
    width: 100%; /*change from 150px to 100%*/
    height: 372px;
    display: block;
    max-width: 100%;
    /*in case you need to fix portrait images*/
    &.portrait {
      object-fit: contain;
    }
  }
}