title: HTML/CSS Text under image
body: <p>Below is the desired style:</p>
  
  <p><img src="https://i.stack.imgur.com/PN6q8.png" alt="here"></p>
  
  <p>This is the jsfiddle link: <a href="http://jsfiddle.net/ZvUuy/" rel="nofollow noreferrer">here</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>   &lt;div class="photos"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"   /&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;span&gt;Android&lt;/span&gt;
              &lt;a href=""&gt;See More...&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://lotssports.com/wp-content/uploads/2013/07/zappy-android-300x300.jpg" width="200" height="150"  /&gt;&lt;/a&gt;
              &lt;span&gt;Android&lt;/span&gt;
              &lt;a href=""&gt;See More...&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"  /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://2.bp.blogspot.com/-65ZTcnMYW9c/TurVOon7PrI/AAAAAAAAA_s/07tBb3zCktI/s400/new%2Bprof.png" width="200" height="150"  /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>  /* gallery display */
          .photos {
            display: block;
          }
  
          .photos ul {
            list-style: none;
  
          }
  
          .photos ul li { 
              display: inline;
              list-style: none;
              float: left;
              padding: 0 10px 0 0;
              text-align:center; 
          }
  
          .photos ul li span a {
              background-color: #fff;
          }
  
          .photos ul li a {
  
            display: block;
            /*
            margin-right: 10px;
            margin-bottom: 7px; */
            opacity: 0.75;
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            transition: all 0.3s linear;
          }
          .photos ul li a:hover {
            opacity: 1.0;
          }
  
          .photos ul li a img {
            border: 6px solid #e1d9ec;
          } 
  </code></pre>
  
  <p>But the problem is I can't make the background color white for each list item (image with text underneath) Any help is much appreciated. thanks.</p>