<style type="text/css">
.frame {position:absolute; top:0; left:0; width:100%; height:100%;border:1px solid #ccc;}
#image2 {position:relative; width:370px; height:490px; float:left; margin-right:4px; 
margin-bottom:1em; margin-left:2px;}
#image1 {position:relative; width:370px; height:240px; float:left; margin-bottom:10px;}
#image3 {position:relative; width:200px; height:240px; float:left;}
#image4 {position:relative; width:160px; height:240px; float:left; margin-right:10px;}
</style>
<br><br><div id="image2"><img src="landscape_b.jpg" title="Landscape" alt="Landscape">
<img class ="frame" src="circle.png" title="Landscape" alt="Landscape"></div>
<div id="image1"><img src="landscape_a.jpg" title="Landscape" alt="Landscape">
<img class ="frame" src="circle.png" title="Landscape" alt="Landscape"></div>
<div id="image4"><img src="portrait_a.jpg" title="Portrait" alt="Portrait">
<img class ="frame" src="circle.png" title="Portrait" alt="Portrait"></div>
<div id="image3"><img src="landscape_c.jpg" title="Landscape" alt="Landscape">
<img class ="frame" src="circle.png" title="Landscape" alt="Landscape"></div>
<br class ="clear"><br><br><br>