Q: как внутри прозрачного блока сделать непрозрачный блок Делаю следующим образом, но не получается!   
<div class="element-hover">
  <div class="text">
    <h5>Александра</h5>
    <p>Специалист по правильному питанию</p>
    <a href="#"><i class="fa fa-vk"></i></a>
    <a href="#"><i class="fa fa-facebook"></i></a>
  </div>
</div>

ul li:hover .element-hover {
  height: 211px;
  width: 200px;
  opacity: 1;
  position: absolute;
  left: 0px;
  top: 30px;
  background-color: #000000;
  opacity: 0.4;
}

.text h5 {
  font-size: 14px;
  opacity: 1;
}


A: div.element-hover{opacity: устанавливает прозрачность для всего блока, вложенные не наследуют, просто для них установлено значение в родителе. Это же логично :-) Ведь блок по определению — единое целое. Надо просто весь остальной текст, собрать в соседний блок, и уже ему устанавливать прозрачность. Вот пример:
http://jsfiddle.net/ankitest/phnf89q6/embedded/result/
Есть и другой способ, смотря для какой задачи. Установить цвет фона и границы (возможно и шрифта, опять таки, смотря для какой задачи) блока div прозрачным, через rgba(0,0,0,0).

A: Возможно, вы пытаетесь сделать вот так:


.element-hover {
  height: 211px;
  width: 200px;
  position: absolute;
  left: 0px;
  top: 30px;
  background-color: rgba(0,0,0,.5);
}

.text h5 {
  font-size: 14px;
}
<div class="element-hover">
  <div class="text">
    <h5>Александра</h5>
    <p>Специалист по правильному питанию</p>
    <a href="#"><i class="fa fa-vk"></i></a>
    <a href="#"><i class="fa fa-facebook"></i></a>
  </div>
</div>


