Перекрытие блока прозрачным блоком

Я не уверен, чего вы хотите, но это похож на вашу картинку:

body { 
  background-color: yellow; 
} 
#div1 { 
  width: 200px; 
  height: 50px; 
  background: transparent; 
  border: 1px solid red; 
  margin: auto; 
} 
#div2 { 
  width: 100px; 
  height: 50px; 
  color: white; 
  background-color: black; 
  margin: auto; 
}

<div id="div1">div 1</div> 
<div id="div2">div 2</div>

Например так: HTML:

<div class="wrap">
<div class="div1">
<div class="div2"></div></div></div>

CSS:

.wrap {position:relative;}
.div1 {opacity:0.5; position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;}
.div2 {width:500px; height:100px; position:relative; z-index:1;}

То есть для прозрачного блока делаем абсолютное позиционирование относительно родителя.

UPDATE 1

Ну Вам тогда не подойдет перекрытие. Там нужно делать анимацию меняя padding-top. Тогда будет нужный Вам эффект. Наведите на черный элемент. Вот пример на JsFiddle

Прозрачный ничего перекрывать не может.

Способ 1: вместо прозрачности унаследовать фон.

Способ 2: Второй положить во вреппер с overflow:hidden и двигать внутри него.

Способ 3: Использовать clip.