css изображение наложения (значок увеличения)

Question

Как я могу получить изображение поверх другого изображения в css? Я пытаюсь получить значок маленького увеличительного стекла поверх каждого изображения, которое у меня есть в сетке.

На вопрос о том, как я могу избавиться от # в моем css и изменить его.

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

Первый пример без сетки и удален # ссылка.

.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/

Второй пример с сеткой, помещая изображение и значок масштабирования в сетку (В этом случае маркированного списка):

.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/

---