title: Polaroid Image Gallery with only css
body: <p><strong>UPDATE</strong> </p>
  
  <p>here is a js-fiddle with images available: <a href="http://jsfiddle.net/TBwWw/" rel="nofollow noreferrer">http://jsfiddle.net/TBwWw/</a></p>
  
  <p>I am using a tutorial that I found <a href="http://zurb.com/article/305/easily-turn-your-images-into-polaroids-wi" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I have an unordered list that simply links the image to a larger one and also displays the image on the page. </p>
  
  <pre><code>&lt;ul class="polaroids"&gt; 
     &lt;li&gt;
        &lt;a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!"&gt;
          &lt;img src="example/cyan_hawk.jpg" alt="Roeland!"&gt;
        &lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And then css that is supposed to be adjusting the image size, add the polaroid effect and a whole lot more. </p>
  
  <pre><code>ul.polaroids a:after {
  content: attr(title);
  }
  
  /* By default, we tilt all our images -2 degrees */
  ul.polaroids a {
      -webkit-transform: rotate(-2deg);
      -o-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
      -moz-transform: rotate(-2deg);
      transform: rotate(-2deg);
  }
  
  /* Rotate all even images 2 degrees */
  ul.polaroids li:nth-child(even) a {
      -webkit-transform: rotate(2deg);
      -o-transform: rotate(2deg);
      -ms-transform: rotate(2deg);
      -moz-transform: rotate(2deg);
      transform: rotate(2deg);
  }
  /* Don't rotate every third image, but offset its position */
  ul.polaroids li:nth-child(3n) a {
      -webkit-transform: none;
      -o-transform: none;
      -ms-transform: none;
      -moz-transform: none;
      transform: none;
      position: relative;
      top: -5px;
  }
  
  /* Rotate every fifth image by 5 degrees and offset it */
  ul.polaroids li:nth-child(5n) a {
      -webkit-transform: rotate(5deg);
      -o-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      -moz-transform: rotate(5deg);
      transform: rotate(5deg);
      position: relative;
      right: 5px;
  }
  
  /* Keep default rotate for every eighth, but offset it */
  ul.polaroids li:nth-child(8n) a {
      position: relative;
      top: 8px;
      right: 5px;
  }
  
  /* Keep default rotate for every eleventh, but offset it */
  ul.polaroids li:nth-child(11n) a {
      position: relative;
      top: 3px;
      left: -5px;
  }
  
  /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
  ul.polaroids a:hover {
      -webkit-transform: scale(1.25);
      -ms-transform: scale(1.25);
      -o-transform: scale(1.25);
      -moz-transform: scale(1.25);
      transform: scale(1.25);
      position: relative;
      z-index: 5;
  }
  
  /* Add drop shadows and smooth out the transition (Safari only) */
  ul.polaroids a {
      -webkit-transition: 0 .15s linear;
      -moz-transition: 0 .15s linear;
      -o-transition: 0 .15s linear;
      -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
      -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
      box-shadow: 0 3px 6px rgba(0,0,0,.25);
  }
  
  /* On hover, darken the shadows a bit */
  ul.polaroids a {
      -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
      -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
      box-shadow: 0 3px 6px rgba(0,0,0,.5);
  }
  </code></pre>
  
  <p>The end result is supposed to be: </p>
  
  <p><img src="https://i.stack.imgur.com/kKtZn.jpg" alt="enter image description here"></p>
  
  <p>But they are just appearing with just the unordered list text decoration and the after title effects like so: </p>
  
  <p><img src="https://i.stack.imgur.com/fi3b1.png" alt="enter image description here"></p>
  
  <p>Everyone else in the comments on the tutorial said it worked just fine. I don't understand why it isn't working for me. I do have the css in an external style sheet that is linked and being found correctly. Finally, the Google Chrome console is showing no errors. I have tried it in Google Chrome and Internet Explorer. </p>