How to set the image search box to 'None' or 'Off'?

Question

I am using the code prepared by @Cybernetic which can be found here (Active Search Bar for images). The code is mainly for searching for images through a search box using jquery. @Cybernetic did an outstanding job with his code and I couldn't post a comment there because I don't have enough points. I wish he can see this posting and answer my question. What I wanted to ask about is whether we can set the code to hide images when we run it. Because I am using this code with hundreds of relatively large images! So, running it will load all these images at once which is causing the browser to slow down. So, again, how can we set it to show no images until we start typing in the search box. Thanks!

Update

<h2>Search for Image</h2>
<style>

.imgContainer{
    float:left;
}
img {
width: 1220px !important;
border: 3px; 
}
body {
background: white !important; 
}
.imgContainer {
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.imgContainer:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 40px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
img{
border: 5px solid #33cc33;
}



</style>


<!-- <button type="mybutton">Click Me!</button> -->


<input type="text" id="myinput" name="search" placeholder="search..." style="width:600px; height: 40px; border-radius: 4px; font-size: 18px;"><br><br>
<center>
<div id="images">

<img src="C:\dir..............\image-1.jpg"  width=1130></a>
<img src="C:\dir..............\image-2.jpg"  width=1130></a>
<img src="C:\dir..............\image-3.jpg"  width=1130></a>
<img src="C:\dir..............\image-4.jpg"  width=1130></a>
<img src="C:\dir..............\image-5.jpg"  width=1130></a>





</div>


<script>
$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        val = val.split(" ").join("\\ ");
        $("img[alt*=" + val + " i]").show();
    }
});
<!-- $("#mybutton").on('click', function() { -->
    <!-- var myinput = $('#mytextbox'); -->
    <!-- var val = $.trim(myinput.value); -->
    <!-- if (val === "") -->
        <!-- $('img').show(); -->
    <!-- else { -->
        <!-- $('img').hide(); -->
        <!-- $("img[alt*=" + val + "]").show(); -->
    <!-- } -->
<!-- }); -->
</script>

Answer 1

CHANGES:

• added regExp check for special chars.
• edited result's style.
• set images display to none to display only on search.
• added hover action to images.
• add span to show no result found if search didn't met any images.

$(document).ready(function() {
  $("#mybutton").on('click', function() {
    var mysrchbox = $("#myinput").val();
    mysrchbox = mysrchbox.replace(/[^a-zA-Z ]/g, "")
    var val = $.trim(mysrchbox);
    if (val === "") {
      $('#none').show();
      $('img').hide();
    } else {
      val = val.split(" ").join("\\ ");
      if ( $("img[alt*=" + val + " i]").attr('alt') === undefined ) {
        $('#none').show();
        $('img').hide();
      } else {
      $('#none').hide();
      $('img').hide();
        $("img[alt*=" + val + " i]").show();
        $("img[alt*=" + val + " i]").css('display', 'inline-flex');
      }
    }
  });
});

body {
  background: white !important;
}

#images {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-basis: 33.3%;
  width: 100%;
  margin: auto;
  text-align: center;
}

#images img {
background: white;
  position: relative;
  margin: auto;
  display: none;
  object-fit: contain;
  height: max-content;
  padding: 0.5rem;
  text-align: center;
  margin: auto;
}

#images img:hover {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Search for Image</h2>

<input type="button" id="mybutton" value="Search!">
<input type="text" id="myinput" name="search" placeholder="search..." style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>

<div id="images"><span id="none" hidden="true">no result related for your search.</span>
  <a href="#"><img src="https://p.kindpng.com/picc/s/108-1082674_bitcoin-png-bitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130></a>
  <a href="#"><img src="https://png.pngitem.com/pimgs/s/692-6924771_blockchain-cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130></a>
  <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" alt="Ripple" width=130></a>
  <a href="#"><img src="https://i.redd.it/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130></a>
  <a href="#"><img src="https://freepikpsd.com/wp-content/uploads/2019/10/cardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130></a>
  <a href="#"><img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" alt="NEM" width=130></a>
  <a href="#"><img src="https://bitkee.com/icons/litecoin-logo.png" alt="LiteCoin" width=130></a>
  <a href="#"><img src="http://bittrust.s3.amazonaws.com/1486429998.png" alt="Stellar Lumens" width=130></a>
</div>