Как сделать затемнение картинки и нижний всплывающий блок при наведении?

Question

[Александр]

Здравствуйте!
Подскажите пожалуйста, как сделать затемнение картинки и нижний всплывающий блок при наведении?
Например, как вконтакте:
, при наведении картинка становится светлее, и появляется нижний блок со стоимостью подарка.
Только мне нужно сделать затемнение, и сам блок темного-прозрачного цвета.
Пример:
CSS:

.gifts-list {
    overflow-y: scroll; /* Добавляем полосы прокрутки */
    height: 300px; /* Высота блока */
    border: solid 1px black; /* Параметры рамки */
   } 

.gifts-item {
    width: 92px;
    height: 93px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: #2e2e2e;
    text-align: center;
}

HTML:

<ul class="list-inline gifts-list">
<li class="gifts-item left"><img src="upload/gifts/1/1.png" width="64" alt=""></li>
<li class="gifts-item left"><img src="upload/gifts/1/2.png" width="64" alt=""></li>
<li class="gifts-item left"><img src="upload/gifts/1/3.png" width="64" alt=""></li>
...
</ul>

Comments

[tityanka]

Добавь блок с ценой, например .price с display:none; а при наведении на gifts-item отобразить его. Например .gifts-items:hover .price {display:block}

Answer 1

[Сергей Софьичев]

codepen.io/anon/pen/XddLVJ

Comments

[Александр]

Большое спасибо!

Answer 2

[EEclipsEE]

Как вариант поместиь div в li.

Div {
background-color: rgba(255,255,255,.05);
Visability: hidden;
}

gifts-item:hover div {
visability: visible;
}

Comments

[Александр]

Спасибо))

[EEclipsEE]

Александр: если помогло не забываем помечать ответ как решение вашего вопроса.

Answer 3

[Андрей]

visibility и opacity