Place Pig CSS Gallery

by Chris Buttery

HTML

<!DOCTYPE HTML>
<html>
    
<head></head>
<body>

<div class="slideshow">

  <div class="slide">
      <input type="radio" id="tab-1" name="tab-group-1" checked />
      <label for="tab-1">1</label>
      <div class="content">
          <span>I can haz grass?</span>
          <img src="http://f.cl.ly/items/3s1U2D2c1y1j3E0w1A1O/place-pig.jpg" alt="place pig"/>
      </div> 
  </div>

  <div class="slide">
      <input type="radio" id="tab-2" name="tab-group-1" />
      <label for="tab-2">2</label>

      <div class="content">
          <span>I can haz bedroom?</span>
          <img src="http://f.cl.ly/items/111E2E401y063r2Z361D/place-pig2.jpg" alt="place pig"/>
      </div> 
  </div>

   <div class="slide">
      <input type="radio" id="tab-3" name="tab-group-1" />
      <label for="tab-3">3</label>

      <div class="content">
          <span>I can haz fashion?</span>
          <img src="http://f.cl.ly/items/3c3Y3R02121P2c15053H/place-pig3.jpg" alt="place pig"/>
      </div> 
  </div>

</div>

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</body>
</html>

CSS

body {
  background: #999;  
  padding: 20px 40px; 
}

.slideshow {
    background: #fff;
    border: 1px solid #888; 
    height: 270px;
    position: relative;   
    margin: 50px auto;
    text-align: center;
    width: 520px;
    -webkit-box-shadow: 0 0 5px#666;
       -moz-box-shadow: 0 0 5px #666;
            box-shadow: 0 0 5px #666;
    zoom: 1;
}

.slide {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.slide label {
    background: #eee; 
    border: 1px solid #888;
    display: block;
    height: 9px;
    left: 1px;
    overflow: hidden;
    position: relative;
    text-indent: -9999px;
    top: 280px;
    width: 9px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

.slide input  {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}

.content {
    left: 10px;
    opacity: 0;
    position: absolute;
    top: 10px;
    width: 500px;
    z-index: 1;
    zoom: 1;
     -webkit-transition: all .60s ease-in;
        -moz-transition: all .60s ease-in;
             transition: all .60s ease-in;
}

.content span {
    font: 14px/18px 'Helvetica Neue';
    color: #333;
    display: block;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,.3);
    top: -40px;
    width: 100%;
    z-index: 1000;
}

.slide label:hover,
input[type=radio]:checked ~ label {
    background: #FEF1B5;
    border-color: #EEC900;
}

input[type=radio]:checked ~ .content {
    left: 10px;
    opacity: 1;
}