<div class="col-12">
  <div class="iframe-container">
  <iframe src="https://na03.alma.exlibrisgroup.com/view/uresolver/01GALI_EMORY/openurl?rfr_id=info:sid/primo.exlibrisgroup.com&u.ignore_date_coverage=true&svc_dat=getit&rft.mms_id=990010439240302486" frameborder="0"></iframe>

  <div id="front">
    <a href="#">  Log-in to see more options</a>  
  </div>
</div>
  </div>
body {
  font: normal normal 16px/1.9375 "Open Sans", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: #605858;
  margin: 1rem auto;
}

.iframe-container {
  position: relative;
  width: 100%;
}

iframe {
  width: 100%;
  height: 400px;
  position: absolute;
  border: solid 1px #ddd;
  border-top-width: 4px;
}

#front {
  position: absolute;
  width: 100%;
  height: 400px;
  left: 0;
  top: 0;
  text-align: center;
  background: rgba(246, 228, 193, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  font-weight: 700;
  font-style: normal;
  color: #336be6;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  background: 0 0;
  border: none;
}
Run Pen

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js