Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Image Effects >> Pure CSS Image Gallery


Code Snippet </> Info


Snippet Name: Pure CSS Image Gallery

Description: Add a pure CSS mage gallery to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Create a small thumbnail image and full size image for each picture you want seen in your gallery.

Author: Mozilla Developer Network

Last Modified: 2019-12-09 00:40:08

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library