Onclick, hover, and div toggle

Question

I'm having issues getting this code to behave. My aim in the code below is to get the cards to have the cards turn over when the mouse hovers on them, and to remain so when clicked. If another card is clicked, the face-up card (if any exist) is flipped back to face down. All the while, clicking any cards toggles the appearance of the set of divs below. I can't get the cards to remain face-up, and I'm not sure why.

Not sure if I explained it well, but any assistance would be appreciated!

 var divs = ["Div1", "Div2", "Div3", "Div4"];
 var visibleDivId = null;

 function divVisibility(divId) {
   if (visibleDivId === divId) {
     visibleDivId = null;
   } else {
     visibleDivId = divId;
   }
   hideNonVisibleDivs();
 }

 function hideNonVisibleDivs() {
   var i, divId, div;
   for (i = 0; i < divs.length; i++) {
     divId = divs[i];
     div = document.getElementById(divId);
     if (visibleDivId === divId) {
       div.style.display = "block";
     } else {
       div.style.display = "none";
     }
   }
 }

.buttons a {
  width: 15%;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.buttons .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.buttons a:hover .img-top {
  display: inline;
}

<div class="main_div">
  <div class="buttons">
    <a href="#" onclick="divVisibility('Div1'); return false;">
      <img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front">
    </a> |
    <a href="#" onclick="divVisibility('Div2'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> |
    <a href="#" onclick="divVisibility('Div3'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> |
    <a href="#" onclick="divVisibility('Div4'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a>
  </div>
  <div class="inner_div">
    <div id="Div1">I'm Div One</div>
    <div id="Div2" style="display: none;">I'm Div Two</div>
    <div id="Div3" style="display: none;">I'm Div Three</div>
    <div id="Div4" style="display: none;">I'm Div Four</div>
  </div>
</div>