<style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>
<div class="gallerycontainer"><a class="thumbnail" href="#thumb"><img width="100px" height="66px" border="0" alt="" src="http://www.bildirgec.org/imaj/wanadooo/photoshop-resources.png" /><span><img alt="" src="http://www.bildirgec.org/imaj/wanadooo/photoshop-resources.png" /><br />
Örnek bir resim ve örnek bir yazı. Buradan değiştirebilirsiniz..</span></a> <a class="thumbnail" href="#thumb"><img width="100px" height="66px" border="0" alt="" src="http://demo.themeshift.com/defacto/wp-content/uploads/2011/09/trichet-1-135x90.jpg" /><span><img alt="" src="http://demo.themeshift.com/defacto/wp-content/uploads/2011/09/trichet-1-135x90.jpg" /><br />
Örnek bir resim ve örnek bir yazı. Buradan değiştirebilirsiniz..</span></a> <br />
<a class="thumbnail" href="#thumb"><img width="100px" height="75px" border="0" alt="" src="http://demo.themeshift.com/defacto/wp-content/uploads/2011/09/barca-1-135x90.jpg" /><span><img alt="" src="http://demo.themeshift.com/defacto/wp-content/uploads/2011/09/barca-1-135x90.jpg" /><br />
Örnek bir resim ve örnek bir yazı. Buradan değiştirebilirsiniz..</span></a> <a class="thumbnail" href="#thumb"><img width="100px" height="70px" border="0" alt="" src="http://demo.themeshift.com/defacto/wp-content/uploads/2011/09/merkel-2-135x90.jpg" /><span><img alt="" src="http://demo.themeshift.com/defacto/wp-content/uploads/2011/09/merkel-2-135x90.jpg" /><br />
Örnek bir resim ve örnek bir yazı. Buradan değiştirebilirsiniz..</span></a></div>
