Проблема с непрозрачностью

#css #transparency #opacity

#css #прозрачность #непрозрачность

Вопрос:

При наведении курсора мыши на изображение пользователи могут увидеть некоторую дополнительную информацию об изображении. Раньше он был прозрачным, но теперь я не хочу, чтобы он был прозрачным. Итак, я удалил opacity строку в моем css. Но затем блок приобрел совершенно новый вид…

Перед
введите описание изображения здесь

После
введите описание изображения здесь

CSS

  #uicarousel-news-preview-block-1 .ui-carousel-item .views-field-title,
 #uicarousel-news-preview-block-2 .ui-carousel-item .views-field-title {
        height:35px;
        margin-top:-46px;
        background-color:green;
        padding-left : 30px;
        padding-right : 30px;
        opacity : 0.6;
        /*IE opacity*/
        filter:alpha(opacity=60);
        color: white;
        display: none;
    }
  

Что-то не так с CSS, или что мне нужно сделать, чтобы убедиться, что непрозрачности нет и div все еще находится перед изображением?

Обновить
Это HTML. Это веб-сайт на Drupal, и зеленая полоса — это views-field-title
введите описание изображения здесь

Комментарии:

1. Было бы полезно просмотреть соответствующий HTML.

Ответ №1:

Это должно помочь:

 #uicarousel-news-preview-block-2 .ui-carousel-item .views-field-title
{
  ...
  position:relative; 
  /* z-index: ...; - if needed */
}
  

Комментарии:

1. Отлично, сработало!! Глупо с моей стороны не подумать об этом самому! Спасибо