CSS 이미지 오버레이 (확대/축소 아이콘)

Question

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>

을

01 귀하의 측면 질문에 대해서는 23,516,

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

---