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

Здравствуйте!
Подскажите пожалуйста, как сделать затемнение картинки и нижний всплывающий блок при наведении?
Например, как вконтакте:
bb53638d3c994bcaaf4d513fa756f06e.png, при наведении картинка становится светлее, и появляется нижний блок со стоимостью подарка.
Только мне нужно сделать затемнение, и сам блок темного-прозрачного цвета.
Пример:
07033bbaece34bdda313013197808471.pngCSS:
.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>
  • Вопрос задан
  • 775 просмотров
Решения вопроса 2
@EEclipsEE
Как вариант поместиь div в li.

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

gifts-item:hover div {
visability: visible;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы