<!DOCTYPE html>
<html>
<head>
<title>G R I D + l I S T</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width">
<style>
* { box-sizing:border-box;border:0px;outline:0px; }html, body { height:100%;padding:24px;cursor:crosshair;font:normal normal 100%/1.0 sans-serif;color:#000000; }
#box { width:auto;height:auto;padding:0px;margin:0px;list-style-type:none; }
#box li { width:160px;height:120px;position:relative;margin:4px;display:inline-block; }
#box li a { width:160px;height:120px;position:absolute;display:inline-block;overflow:hidden;text-decoration:none;background:#F4F4F4; }
#box li a img { width:100%;height:100%;border:0px; }
#box li a:hover { width:320px;height:240px;position:absolute;left:-80px;top:-60px;z-index:404;background:#4FF4F4; }
#box li a:focus { width:320px;height:240px;position:absolute;left:-80px;top:-60px;z-index:400;background:#F4F4FF; }
#inf { list-style:square;text-align:right;cursor:help; }
#inf li p { padding:4px;visibility:hidden;background:#F4F4F4; }
#inf li:hover p { padding:4px;visibility:visible;background:#F4F4FF; }
#inf li:active p { padding:4px;visibility:visible;background:#4FF4F4; }
</style>
</head>
<body>
<h1>Grid + List</h1>
<ul id="inf">
<li>I n f o<p>About this Site Info and more . . .</p></li>
</ul>
<ul id="box">
<li><a href="javascript:">1</a></li>
<li><a href="javascript:">2</a></li>
<li><a href="javascript:">3</a></li>
<li><a href="javascript:"><img src="imagen.jpg"></a></li>
<li><a href="javascript:">5</a></li>
<li><a href="javascript:">6</a></li>
<li><a href="javascript:">7</a></li>
<li><a href="javascript:">8</a></li>
<br>
<li><a href="javascript:">1</a></li>
<li><a href="javascript:">2</a></li>
<li><a href="javascript:">3</a></li>
<li><a href="javascript:"><img src="imagen.jpg"></a></li>
<li><a href="javascript:">5</a></li>
<li><a href="javascript:">6</a></li>
<li><a href="javascript:">7</a></li>
<li><a href="javascript:">8</a></li>
</ul>
<br><small>scriptshow © 2018</small></br>
</body>
</html>
