Keine Bilder auf der Startseite

hey. ich hab nach vergleichbaren themen gesucht, aber bin nicht fündig geworden.
ich habe erstmal ein simples menü gebaut, mit mouseover/mouseout werden bilder angezeigt/verschwinden.
das alles ist auf der startseite (vorerst). wie kann ich es schaffen, dass das bild erst nach dem mouseover angezeigt wird? wenn ich die seite aufrufe, ist das bild schon da und dann kann ich mit mouseout das bild verschwinden lassen. (verständlich?)

<div id="box1"><a href="#"><img src="null.gif" onmouseover="show('Bild1');changeRed()" onmouseout="hide('Bild1')" width="50" height="50"> </a></div>

<div id="Bild1"><img src="images/first.jpg" alt="book"></div>

versuch mich erstmal auf screen. responsive ist erstmal noch in weiter ferne. aber da würde ich es mit (mouse)click machen.
also geb ich im bsp.css oben im body an:

.img {
display: none;
}

???

opacity kommt der sache schon näher, aber jetzt hats auch die img"nullgif" verschwinden lassen