HTML5 snippet : Pure CSS3 image lightbox with fade in/out transitions

 <html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>lbox2</title>
	
<style type="text/css" media="screen">
	@-webkit-keyframes supersize {
	  0% { -webkit-transform:scale(.9); }
	  100% { -webkit-transform:scale(1); }
	}
	body {background:#f5efe3;}
	img {vertical-align:middle;}
	ul {
	  list-style:none;
	  padding:0;
	}
	nav {
	  position:absolute;
	  width:100%;
	  left:0;
	  top:50%;
	  margin-top:-100px;
	  text-align:center;
	}
	nav li {
	  display:inline;
	  margin:0 5px;
	}
	nav img {
	  border-radius:4px;
	  -moz-border-radius:4px;
	  -webkit-box-shadow:0 1px 0 #fff;
	  -moz-box-shadow:0 1px 0 #fff;
	  box-shadow:0 1px 0 #fff;
	  -webkit-transition:opacity .2s linear;
	  -moz-transition:opacity .2s linear;
	  -o-transition:opacity .2s linear;
	  transition:opacity .2s linear;
	}
	nav a:hover img {opacity:.75;}
	nav a:active img {margin-top:1px;}
	li[id] {
	  overflow:hidden;
	  position:absolute;
	  width:0;
	  height:0;
	  left:0;
	  top:0;
	  opacity:0;
	  background:rgba(0,0,0,.8);
	  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	  -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	  -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
	  transition:opacity 1.2s cubic-bezier(0,0,0,1);
	}
	li[id] a:before {
	  position:absolute;
	  top:-26px;
	  left:-26px;
	  opacity:0;
	}
	li[id] a:hover:before {opacity:1;}
	li[id]:target {
	  width:100%;
	  height:100%;
	  opacity:1;
	}
	li[id]:target a {
	  position:absolute;
	  top:50%;
	  left:50%;
	  margin:-220px 0 0 -380px;
	  border:15px solid #fff;
	  -webkit-box-shadow:0 1px 8px #000;
	  -moz-box-shadow:0 1px 8px #000;
	  box-shadow:0 1px 8px #000;
	  -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);
	}
</style>

</head>
<body>
	
<nav>	
	<ul>
		<li><a href="#pic1"><img src="http://farm6.static.flickr.com/5142/5784657719_5928798618_m.jpg"></a></li>
		<li><a href="#pic2"><img src="http://farm4.static.flickr.com/3626/5779076533_5f0d0102ea_m.jpg"></a></li>
	</ul>
</nav>
	<ul>
	    <li id="pic1"><a href="#home"><img src="http://farm6.static.flickr.com/5142/5784657719_5928798618_z.jpg" alt=""></a></li>
	    <li id="pic2"><a href="#home"><img src="http://farm4.static.flickr.com/3626/5779076533_5f0d0102ea_z.jpg" alt=""></a></li>
	    
	  </ul>


</body>
</html>
You must login to edit.

7

Pure CSS3 image lightbox with fade in/out transitions

You must login to vote.
