How to preload images in HTML and CSS

I figured out a way to preload images in html and css. I have used this for stuff like buttons that have multiple different images (for when it is clicked vs not being clicked). A lot of the time, you will click on the button then it will take a second to load the background.

How to do it:

In your html, create a

with the class of hidden.
Put img tags with the srcs of all of the images you want to load within that .

For example:

<div class="hidden">
  <img src="images/open_button_click.jpg" alt="">
</div>

The CSS:

Paste this into your CSS:

.hidden {
  position:fixed;
  bottom:0px;
  left:0px;
  pointer-events: none;
  opacity:0%;
}

What this does is hide the elements visually then makes it so they don't affect anything else on your page.

That's all I wanted to keep this simple.