|
|
Copied To Clipboard!
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS Image Gallery</title>
<style>
/* Begin Pure CSS Image Gallery */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://www.SnapBuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* Created by: Mozilla Developer Network : https://developer.mozilla.org/ : Creative Commons License == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
#gallery-container {position:relative;width:500px;height:auto;padding-top:350px;padding-bottom:15px;margin-left:auto;margin-right:auto;text-align:center;border:1px #e6e6e6 solid;}
img.gallery-fullsize {position:absolute;top:15px;left:50px;display:none;}
div.gallery-item {display:inline-block;}
img.gallery-preview:hover ~ img.gallery-fullsize {display:block;}
</style>
</head>
<body>
<div id="content">
<h3 align="center">Pure CSS Image Gallery</h3>
<div id="gallery-container">
<div class="css_gallery_images/gallery-item">
<!-- small 1s.jpg image is bottom thumbnail picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/1s.jpg" class="gallery-preview" />
<!-- small 1.jpg image is the full size picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/1.jpg" class="gallery-fullsize" />
</div>
<div class="gallery-item">
<!-- small 2s.jpg image is bottom thumbnail picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/2s.jpg" class="gallery-preview" />
<!-- small 2.jpg image is the full size picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/2.jpg" class="gallery-fullsize" />
</div>
<div class="gallery-item">
<!-- small 3s.jpg image is bottom thumbnail picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/3s.jpg" class="gallery-preview" />
<!-- small 3.jpg image is the full size picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/3.jpg" class="gallery-fullsize" />
</div>
<div class="gallery-item">
<!-- small 4s.jpg image is bottom thumbnail picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/4s.jpg" class="gallery-preview" />
<!-- small 4.jpg image is the full size picture -->
<img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css_gallery_images/4.jpg" class="gallery-fullsize" />
</div>
</div>
<br /><br /><br /><br /><br />
<p align="center">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_184.html">Pure CSS Image Gallery Code Snippet</a> page. ]
</p>
</div>
</body>
</html>
|
