I have been struggling to create hover text and circular background color elements that appear over my circular image grid on my website. This requires some combination of the HTML and CSS I have I imagine. I think this is difficult for me due to the way I have the grid and positioning setup. So it is hard to position the overlap hover element properly...`Below is my HTML and corresponding CSS code. Thanks!!

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;
  /* Footer height */
}

.title {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 6vw/*550