title: Text on clickable image when hovering
body: <p>I'm fairly new to HTML en CSS. I'm trying to make a portfoliowebsite. What I want to achieve is: clickable images that show the name of the work (text) when hovering. I hope someone can help. Many thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="imagelist"&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn" class="hover"/&gt;&lt;p class="text"&gt;text&lt;/p&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
                              &lt;a href="images/tn.png"&gt;&lt;img src="images/tn.png" alt="tn"/&gt;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#imagelist
      {
          float: left;
          font-size: 0px;
          display: inline-block;
          margin-left: 0%;
          width: 90%;
      }
  
  #imagelist a
      {
          margin: 10px 20px 10px 0px;
          border: 0px solid transparent;
          display: inline-block;
          border-radius: 1px;
      }
  
  #imagelist a:hover
      {
          border-color: black;
          opacity: 0.5; 
          filter: alpha(opacity=50);
      }
  
  #imagelist .text
      {
          position: relative;
          bottomm: 30px;
          left: 0px;
          visibility: hidden;
      }
  
  #imagelist:hover .text 
      {
          visibility:visible;
          text-color: black;
      }
  </code></pre>