css image overlay (zoom icon)

Question

How can I get a image on top of another image in css? I'm trying to get a little magnifying glass icon on top of each image I have in a grid.

On a side question how can I get rid of the # in my css and change it to .

ul#grid {
  list-style: none;
  margin: 60px auto 0;
  width: 1200px; 
   }

#grid li span {
  display:inline;
  color: white;
  display:block;
  bottom:225px;
  position:relative;
  width:180px;
   }

#grid li {
  display:inline-block;
  position: relative;
  float: left;
  margin: 0 40px 75px 0px;
  display:inline;
  position:relative;
   }

#grid li a:hover img {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  opacity: 1;
   }

#grid:hover li {
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opactiy .3s ease-in;
   -ms-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 0.3;
      }

 #grid li img {
   margin: 0;
   width: 339px;
   height: 211px;
   position:relative;
    }

#grid:hover li:hover {
  opacity: 1;
  }

#grid img::selection { background-color: transparent; }

#hidden{
  position:absolute;
  width: 1100px;
  height:670px;
  top:0px;
  z-index:-1;
  }

HTML

 <div class="portfolio">
  <ul id="grid">   
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
 </ul></div>
<div id="hidden">

JSFIDDLE

Answer 1

First example with no grid and Removed the # reference.

.portfolioitem {
  position: relative;
  width: 50%
}
img {
  width: 100%
}
span {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

<div class="portfolioitem">
  <a href="#">
    <img src="http://placehold.it/339x211" />
    <span>+</span>
  </a>
</div>

http://jsfiddle.net/MxtSU/3/

Second example with grid, putting the image and zoom icon into a grid(In this case an unordered list):

.portfolioitem {
  position: relative;
  width: 50%
}
img {
  width: 100%
}
span {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

<ul>
  <li>
    <div class="portfolioitem">
      <a href="#">
        <img src="http://placehold.it/339x211" />
        <span>+</span>
      </a>
    </div>
  </li>
  <li>
    <div class="portfolioitem">
      <a href="#">
        <img src="http://placehold.it/339x211" />
        <span>+</span>
      </a>
    </div>
  </li>
</ul>

http://jsfiddle.net/MxtSU/4/

---

Answer 2

Change the child position as absolute, and the parent element as relative, absolute or fixed, not static.

Answer 3

You have to change your position as absolute.