A CodePen by Sara Soueidan. Pure CSS3 Camera Lens Icon for Photos App - Pure CSS3.

index.html

<div class="wrapper">
  <figure>
    <img src="http://www.seniorcarectrs.com/wp-content/uploads/2013/01/Winter-Snowman.jpg" />
    <figcaption>Snowman with Trees</figcaption>
  </figure>
  <figure>
    <img src="http://hdwpapers.com/thumbs/winter_snow_wallpaper_2-t2.jpg" />
    <figcaption>Winter Scenery</figcaption>
  </figure>
  <figure>
    <img src="http://www.my2fun.com/wp-content/uploads/2012/12/winter-wallpaper-backgrounds-17-400x400.jpg" />
    <figcaption> Winter House</figcaption>
  </figure>
  <div class="lenscontainer">
    <div class="outerouter">
      <div class="outerlens">
        <div class="lens"></div>
      </div>
    </div>
  </div><!--end lens container-->
</div>
<h1>Pure CSS3 Camera Lens Icon</h1>

script.js

/*

The code is far from clean, as I started from the inside out, so it's messy, and the camera lens isn't perfect of course but whatever :)

Inspired from this work by Maria Garkusha:
http://www.scoutzie.com/maria-garkusha


*/

style.css

@import url(http://fonts.googleapis.com/css?family=Allura);
body{background:url('http://hdwallpaperpics.com/wallpaper/picture/image/soft_bokeh_lights_background-other.jpg');}
h1{
text-align:center;
  color:white;
  text-shadow:1px 1px black;
}
.wrapper{
  width:500px;
  margin:30px auto;
  position:relative;
  height:500px;
  background:url('http://subtlepatterns.com/patterns/dark_leather.png');
  z-index:-15;
  border:2px dashed grey;
  box-shadow: 0 0 0 15px #111111;
  border-radius:20px;
}
figure{
  width:270px;
  height:250px;
  position:absolute;
  background:white;
  padding:15px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
figure:first-child{
  transform: rotate(25deg);
  z-index:-12;
  top:10px;
  right:50px;

}
figure:nth-child(2){
transform:rotate(-20deg);
  z-index:-13;
  top:150px
}
figure:nth-child(3){
transform:rotate(-15deg);
  z-index:-14;
  top:40px;
  left:60px;
}
img{
  width:270px;
  height:200px;
  border:1px solid grey;
}

figcaption{
  padding-top:5px;
  font-family:  'Allura', cursive;
  font-size:2em;
}

.lens{
	height:100px; width:100px;
	margin:9px;
	border-radius:50%;
	border:1px solid black;
	background: 
	radial-gradient(#68554F, #241822, #68554F);
	box-shadow: inset 0 -10px 5px black, inset 0 10px 5px #68453F;
	position:Relative; 
}
.lens:before{
	display:block;
	content:"";
	height:10px; width:10px; border:1px solid rgba(0,0,0,0.4);
	box-shadow: 0 0 10px 10px rgba(0,0,0,0.5),
	0 0 10px 15px rgba(0,0,0,0.2),
	inset 0 -3px 2px rgba(0,0,0,0.4),
	inset 0 1px 1px rgba(255,255,255,0.05),
	-20px 10px 2px 10px rgba(255,255,255,0.2);
	position:absolute;
	margin:45px;
	border-radius:50%;
	
}
.lens:after{
	display:block;
	content:""; position:absolute;
	height:50px; width:50px; border-radius:50%;
	margin:25px;
	border-bottom:5px solid rgba(255,255,255,0.05);
	/*box-shadow: 0 1px 5px rgba(255,255,255,0.05);*/
	
}
.outerlens{
	width:120px; height:120px; border:1px solid #222; border-radius:50%;
	box-shadow: inset 0 15px 10px rgba(0,0,0,0.9),
	inset 0 -15px 20px rgba(255,255,255,0.4);
	background: black;
	margin:9px;	
}
.outerouter{
	width:140px; height:140px;
	border-radius:50%;
	background:black;
	box-shadow: inset 0 -15px 20px rgba(255,255,255,0.4),
	0 0 0px 50px #1A1E1F;
	border-top:1px solid black;
	border-bottom:1px solid black;
	position:relative;
  margin:70px;
}
.outerouter:before{
	width:240px; height:240px;
	position:absolute;border-radius:50%;
	display:block;
	content:"";
	margin:-51px;
	border:2px solid #222;
  box-shadow:inset 0 -40px 50px rgba(255,255,255,0.2);
}
.outerouter:after{
	width:249px; height:249px;
	position:absolute;border-radius:50%;
	display:block;
	content:"";
	border:2px solid #222;
  margin:-196px -56px;
  z-index:-10;
  background:linear-gradient(#333,#52595B);
  box-shadow:0 0 0 15px rgba(0,0,0,0.8);
}
.lenscontainer{
  border:3px solid #eee;
  height:280px;
  width:280px;
  border-radius:50%;
  margin:30px auto;
  box-shadow:0 0 1px 1px black,
    inset 0 0 1px 1px black,
    inset 0 13px 7px rgba(255,255,255,0.9),
    inset 0 -10px 10px rgba(0,0,0,0.3),
    0 0 10px 10px rgba(0,0,0,0.5);
  z-index:10;
  position:absolute;
  bottom:0;
  right:30px;
  background:black;
}