Css swap image without JS - html

Question

I am working on our restaurant web and I am trying something new for showing the menu. I use hover to show a bigger image when hovering over a thumbnail. I am satisfied with the layout and functionality but I am concerned about load time when all menu items are up.
The problem I see is that all pictures are loaded when the page are loaded and just made invisible until you hover the thumbnail. I don't want to use JS because I don't want real popups that can be blocked.
Is there any other way to get the same effect with puse css?
Page is here http://www.thejunctioncafe-paphos.com/menu_junction_cafe.html
The CSS
ul.enlarge{
list-style-type:none;
margin-left:0px;
width: 700px;
margin:auto;
}
ul.enlarge li{
display:inline-block;
position: relative;
z-index: 0; /
margin:10px 10px 0 10px;
}
ul.enlarge img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ul.enlarge span{
position:absolute;
left: -3999px;
background-color:#eae9d4;
padding: 10px;
font-family: 'Calibri', sans-serif;
font-size:.9em;
text-align: center;
color: #000;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{
top: -350px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}
ul.enlarge img, ul.enlarge span{
behavior: url(scripts/PIE.htc);
}

Answer 1

Popups are blocked when you use javascript to create the popup, not load the images. So just load the images with javascript after the page is complete. Then let your images popup as you have them now.
If you want to do it even better, load the image when the user hovers over a thumbnail in the pre-assumption he will click on it.

Answer 2

i suggest you leave it the way you have them because, as far as i can see, they are small images and will not affect the load time.
but with only CSS you could do something like this :
.menu-item:hover .more {
display:block;
background:url("http://www.thejunctioncafe-paphos.com/images/Breakfast-Roll.png") no-repeat scroll left top;
position:absolute;
height:100%;
width:100%;
top:0%;
}
.more {
display:none;
}
.menu-item {
width:200px;
height:200px;
}
<div class="menu-item">
<img src="http://www.thejunctioncafe-paphos.com/images/Breakfast-Roll_th.png" width="100" height="67" alt="Breakfast Roll">
<span class="more">MORE TEXT</span>
</div>
in this way the big image is loaded only after the :hover event on .menu-item and you can style it how you want. but you would have to write css ( background-image ) for all the .menu-items