 <p>try this. <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> body { margin: 0; padding: 0; background: #EEE; font: 10px/13px'Lucida Sans', sans-serif; } .wrap { overflow: hidden; margin: 50px; } /*20 for 5 box , 25 for 4 box*/ .box { float: left; position: relative; width: 25%; padding-bottom: 25%; color: #FFF; } /*border width control*/ .boxInner { position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; overflow: hidden; background: #66F; } .boxInner img { width: 100%; } .gallerycontainer { position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } /*This hover is for small image*/ .thumbnail:hover img { border: 1px solid transparent; } /*This hide the image that is in the span*/ .thumbnail span { position: absolute; padding: 5px; visibility: hidden; color: black; text-decoration: none; } /*This is for the hidden images, to resize*/ .thumbnail span img { /*CSS for enlarged image*/ border-width: 0; width: 200%; /* you can use % */ height: auto; padding: 2px; } /*When mouse over, the hidden image apear*/ .thumbnail:hover span { position: fixed; visibility: visible; z-index: 200; zoom: 62%; bottom: 0; right: 0; } .thumbnail:hover span img { width: 100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;link href="overlay2.css" rel="stylesheet" type="text/css" /&gt; &lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;meta name="description" content="" /&gt; &lt;meta name="keywords" content="" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="wrap"&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;div class="boxInner"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" /&gt;&lt;span&gt;&lt;img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" /&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p>