title: How do i make a link when clicked show a larger image on the page
body: <p>Basically i want my see more button, when clicked to enlarge the image above it. So that the image appears in the middle of the page enlarged does anyone know of a way to do this, or a tutorial i could follow, would be much appreciated. by the way im fairly new to web design so a little help thanks!</p>
  
  <p>Also the objects i want to change are under portfolio item</p>
  
  <p>here is a link to the website:</p>
  
  <p><a href="http://www.mmicgt.com/michael_g/portfolio.html" rel="nofollow">http://www.mmicgt.com/michael_g/portfolio.html</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;title&gt;{Michael Grace} Portfolio website - {Gracey design}&lt;/title&gt;
  
      &lt;link href="css/gallery.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="container"&gt;      
  
  
          &lt;ul id="navigation"&gt;
  
          &lt;li&gt;&lt;a href="index.html"&gt;&lt;img src="images/images/home_button2.gif" onmouseover="this.src='images/images/home_button1.gif'" onmouseout="this.src='images/images/home_button2.gif'"/&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="about.html"&gt;&lt;img src="images/images/about_button1.gif" onmouseover="this.src='images/images/about_button2.gif'" onmouseout="this.src='images/images/about_button1.gif'"/&gt;&lt;/a&gt;
          &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;div id="logo" style="padding:16px"&gt;
                      &lt;img src="images/images/logo.png" /&gt;
                  &lt;/div&gt;
              &lt;/li&gt;    
  
          &lt;li&gt;&lt;a href="portfolio.html"&gt;&lt;img src="images/images/gallery_button1.gif" onmouseover="this.src='images/images/gallery_button2.gif'" onmouseout="this.src='images/images/gallery_button1.gif'"/&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="contact.html"&gt;&lt;img src="images/images/contact_button1.gif" onmouseover="this.src='images/images/contact_button2.png'" onmouseout="this.src='images/images/contact_button1.gif'"/&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;/ul&gt;
  
        &lt;div id="header"&gt;
  
            &lt;h1&gt;&lt;img src="images/images/gallery_03.png" /&gt;&lt;/h1&gt;
            &lt;h2&gt;Portfolio.&lt;/h2&gt;
  
        &lt;/div&gt;
  
        &lt;div id="line"&gt;
        &lt;/div&gt;
  
        &lt;div id="content"&gt;
  
          &lt;p&gt;Did I mention I design stuff? I've had plenty of fun creating a bunch of designs for both Univeristy and for myself as personal projects. Here's a collection of some of my favs.  
          &lt;/p&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image1.gif" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image2.gif" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image3.gif" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image4.gif" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image5.png" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image6.png" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image7.png" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="portfolio-item"&gt;
              &lt;a href="#"&gt;&lt;img src="images/home/image8.gif" alt="View more info" /&gt;&lt;/a&gt;
              &lt;p class="btn"&gt;&lt;a href="#"&gt;SEE MORE&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;  
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>body {
  background: url(../images/images/bg_page.gif) center center;
  font: 16px Helvetica, Arial, Sans-Serif; 
  color: #636363; 
  line-height: 24px;
  }
  
  #container {
  width: 940px;
  margin: 0 auto;
  margin-top: 100px;
  }
  
      #header {
      height: 177px;
      background: url(../images/home/header.gif) top center;
      padding: 52px 0 0 28px;
      position: relative;
      border-radius: 10px 10px 0px 0px;
  
      }
  
              #header h1 {
              margin: 0px 0 20px 0; 
              }
  
              #header h2 {
              width: 510px; 
              font: 30px Helvetica, Arial, Sans-Serif; 
              color: #f2f0eb; 
              letter-spacing: 2px; 
              margin: 0 0 20px 0;
              text-shadow: 0px 3px 3px #494949;
              }
  
      #logo {
      width: 272px;
      height: 214px;
      position: absolute;
      left: 49.5%;
      top: 11%; 
      margin-left: -150px;
      margin-top: -86px;
      z-index: 2;
      }
  
      #navigation {
      position: relative;
      height: 60px;
      }
  
          #navigation li {
          display: inline;
          width: 160px; 
          height: 60px; 
          float: left; 
          padding: 13px 0 0 16px;
          }
  
              #navigation li:nth-child(1) {
              margin: 0 0 0 -57px;
              }
              #navigation li:nth-child(2) {
              margin: 0 0 0 0;
              }
              #navigation li:nth-child(3) {
              margin: 0 0 0 0;
              }
              #navigation li:nth-child(4) {
              margin: 0 0 0 77px;
              }
  
  
      #content {
      height: 592px;
      background: url(../images/home/bg_body.png) top center;
      padding: 41px 69px 50px 28px; 
      overflow: hidden;
      position: relative;
      border-radius: 0px 0px 10px 10px;
      }
  
          #content h2 {
          font: 30px Helvetica, Arial, Sans-Serif; 
          letter-spacing: 2px; 
          margin: 0 0 20px 0;
          }
  
          #content h3 {
          font: 26px Helvetica, Arial, Sans-Serif; 
          letter-spacing: 2px; 
          margin: 0 0 20px 0;
          }
  
          #content p {
          margin: 0 0 30px 0;
          }
  
          #content a {
          color: #671111; 
          text-decoration: none;
          }
                  #content a:hover {
                  color: #a12121;
                  }
  
                  #content .portfolio-item {
                  width: 190px; 
                  padding: 1px; 
                  background: #eee; 
                  text-align: center; 
                  float: left;
                  margin: 0 7px 14px 7px;
                  }
  
                  #content .portfolio-item p.btn {
                  margin: 0;
                  }
  
                  #content .portfolio-item p.btn a {
                  display: block; 
                  width: 183px; 
                  height: 29px; 
                  padding: 7px 0 0 0;
                  background: url(images/images/background-seemore_03.gif);
                  font-weight: bold; 
                  text-align: center; 
                  text-transform: uppercase;
                  text-decoration: none;
                  }
  
      #line {
      height: 4px;
      background: url(../images/home/line.gif) top center;
      position: relative;
      }
  </code></pre>