List Simple: Hover show Text, Button, Overlay

To achieve layout like this

To Achieve Layout Like This 1 Min

#1. First, you need to find List Section ID.
In my example, we will have: section[data-section-id=”67079915aa69e8040ff7de42″]

To Achieve Layout Like This 2 Min

#2. Use this code to Website Tools > Custom CSS

section[data-section-id="67079915aa69e8040ff7de42"] {
li.list-item {
      pointer-events: initial !important;
      position: relative;
  }
  /* image */
  li.list-item .list-item-media-inner:before {
      content: "";
      background-color: rgba(0,0,0,0.5);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: all 0.5s ease;
  }
  li.list-item:hover .list-item-media-inner:before {
      opacity: 1;
      transition: all 0.5s ease;
  }
  .list-item-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 100%;
      opacity: 0;
      transition: all 0.5s ease;
      z-index: 9999999;
  }
    /* text color */
  .list-item-content * {
      text-align: center !important;
      color: #fff !important;
  }
  li.list-item:hover .list-item-content {
      opacity: 1;
      transition: all 0.5s ease; 
  }}

To Achieve Layout Like This 3 Min