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

你必须改变你的绝对位置。

Answer 2

将子位置更改为absolute ，将父元素更改为relative ，绝对或固定，而不是静态。

Answer 3

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/

---