마우스 오버 Div 크기 문제

Question

현재 이미지 격자가있는 사이트의 섹션에서 작업 중입니다. 이미지 위에 마우스를 올리면 다른 div가 일부 불투명 한 배경과 텍스트와 함께 나타납니다. 문제는 마우스 오버 디비전을 부모의 동일한 크기와 일치시키지 못한다는 것입니다. 현재로서는 양방향으로 끈적 거리고 있습니다. 어떤 제안? 를 heres 몇 가지 코드

여기

<div class = 'picture-container'> 
      <div class = 'picture-wrapper' id = 'top-left'> 
       <div class = 'onhover'>hello!</div> 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
      <div class = 'picture-wrapper' id = 'top-right'> 
       <div class = 'onhover'>hello!</div> 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
      <div class = 'picture-wrapper' id = 'top-center'> 
       <div class = 'onhover'>hello!</div> 
       <img src = 'ds-map.png' height = '100%' width = '100%'> 
      </div> 
     </div> 

.onhover{ 
    position:absolute; 
    display:none; 
    width:30%; 
    height:100%; 
    background-color:#F5D892; 
    opacity:.4; 
} 


.picture-wrapper{ 
    width:30%; 
    height:100%; 
} 

.picture-wrapper:hover .onhover{ 
    display:block; 
} 

Answer 1

는 jsFiddle

<div class='picture-container'> 
    <div class='picture-wrapper' id='top-left'> 
     <div class='onhover'>hello!</div> 
     <div class="img"> </div> 
    </div> 
    <div class='picture-wrapper' id='top-right'> 
     <div class='onhover'>hello!</div> 
     <div class="img"> </div> 
    </div> 
    <div class='picture-wrapper' id='top-center'> 
     <div class='onhover'>hello!</div> 
     <div class="img"> </div> 
    </div> 
</div> 

.onhover { 
    position:absolute; 
    display:none; 
    width:100px; 
    height:100px; 
    line-height:100px; 
    text-align:center; 
    background-color:#F5D892; 
    opacity:.4; 
} 
.picture-wrapper { 
    width:100%; 
    height:100%; 
} 
.picture-wrapper:hover .onhover { 
    display:block; 
} 
.img 
{ 
    height:100px; 
    width:100px; 
    background:blue; 
} 

당신이