how can i make image hidden on mouseout

Question

Hey i have this site where you mouse over a thumbnail and the larger image appears below and when you mouse out i want the image to be hidden. however whenever i mouse over for the first time the image appears and then when i mouse out the image disappears. However when i mouse over any thumbnail after that the image no longer appears. how do i fix this.

var fullpic = new Array(4);

for (var i = 0; i < fullpic.length; i++)

  fullpic[i] = new Image(515, 385);

fullpic[0].src = "images/FrenchQuarter.jpg";
fullpic[1].src = "images/GoldenGateBridge.jpg";
fullpic[2].src = "images/NazarethBay.jpg";
fullpic[3].src = "images/TheAlamo.jpg";


function displayFull(i) {


  document.getElementById("img-cover").src = fullpic[i].src;
}

function hideFull(i) {
  document.getElementById("img-cover").style.visibility = 'hidden';
}

var fullbanner = new Array(4);

for (var i = 0; i < fullbanner.length; i++)

  fullbanner[i] = new Image(468, 60);

fullbanner[0].src = "images/banner1.gif";
fullbanner[1].src = "images/banner2.gif";
fullbanner[2].src = "images/banner3.gif";
fullbanner[3].src = "images/banner4.gif";

var n = 0;

window.addEventListener("load", showFull, false);

function showFull() {

  setInterval("showPic()", 3000);


}

function showPic() {

  document.getElementById("banner").src = fullbanner[n].src;
  n++;
  if (n > 3)
    n = 0;

}

#banner {
  text-align: center;
}
#thumbs {
  width: 425px;
  height: 80px;
  margin: 0 auto;
}
#main-img {
  width: 513px;
  height: 385px;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#img-cover {
  max-height: 385px;
  padding: 5px;
}

<div id="banner-wrapper">
  <img id="banner" src="images/banner1.gif">
</div>
<div id="thumbs">
  <img class="thumb-img" src="images/FrenchQuarter_small.jpg" onmouseover="displayFull(0)" onmouseout="hideFull(0)">
  <img class="thumb-img" src="images/GoldenGateBridge_small.jpg" onmouseover="displayFull(1)" onmouseout="hideFull(1)">
  <img class="thumb-img" src="images/NazarethBay_small.jpg" onmouseover="displayFull(2)" onmouseout="hideFull(2)">
  <img class="thumb-img" src="images/TheAlamo_small.jpg" onmouseover="displayFull(3)" onmouseout="hideFull(3)">
</div>
<div id="main-img">
  <img id="img-cover" src="">
</div>

<!-------------------CSS---------------------------------------->

#banner-wrapper

Answer 1

Check out these two Stack Overflow questions: Show/hide image with JavaScript and Hiding and displaying an image in mouse over action in a div. Use their code, and then change it to your liking.