CSS Only Pop-Up News

HTML

<a href="#popupA">Learn More</a>

<div id="popupA" class="overlay">
   <div class="newsItem popup">
     <a class="closeButton" href="#">&times;</a>
     <div class="newsBanner"><img alt="News Image" src="https://www.compub.com/media/wysiwyg/Education/lawSociety-2-2.jpg" title="News Image " />
      <h4 class="subHeading">Feature</h4>
      <h4>ICT Grant</h4>
    </div>
    <p>"Presentation College Carlow have been working with Compu b for the past 4 years. Their service is excellent. All of the products are priced favourably for education, especially iPads. We have ordered hundreds at this point and have excellent warranty on all of them - which is essential for students. We have been offered training each year for students and staff and have availed of excellent training on 10 occasions, learning about new apps, security etc. The online shop is so easy for people to use, codes for schools, speedy delivery, excellent advice! I can't recommend the team enough. Digital literacy is essential and with Compu b you get quality products and after sales service."
Claire Mc Hugh
ICT Co-Ordinator, Presentation College Carlow</p>
    </div>
</div>

CSS

/*POP UP*/

.overlay {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 500ms cubic-bezier(1.000, -0.530, 0.405, 1.425);
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.overlay:target .popup{
  transform: scale(1);
}
.popup {
  margin: 50px auto;
  width: 40%;
  background:white;
  position: relative;
  transition: all 500ms cubic-bezier(0.500, 0.250, 0.500, 0.750);
  overflow: hidden;
  transform: scale(0.5);
}
.popup .closeButton {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
  z-index:9999;
}
.popup .closeButton:hover {
  color: red;
}
.popup .content {
  max-height: 40%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .popup{
    width: 70%;
  }
}
/*POP UP END*/

/*NEWS ITEMS*/
.cms-page-view .std .latestEdu > h3 {
        font-family: "Montserrat", OpenSans, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #222222;
    position: absolute;
}


.newsItem {
    position: relative;
    /*float: left;
    margin-right:20px;*/
    -webkit-box-shadow: -1px 0px 32px -5px rgba(34,34,34,0.2);
    -moz-box-shadow: -1px 0px 32px -5px rgba(34,34,34,0.2);
    box-shadow: -1px 0px 32px -5px rgba(34,34,34,0.2);
    transition: all 0.2s ease-out;
    border-radius: 14px;
    overflow: hidden;
    max-height: 80vh;
    min-height:300px;
    white-space:normal;
}

.newsItem .newsBanner {
    position:relative;
    height: 180px;
    width: 100%;
    overflow:hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.newsItem .newsBanner img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

.newsItem > a.open{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
 ...