Opacity problem

When hovering an image, users can see some additional information about the image. Before it was transparent, but now I don't want it make it transparent. So I deleted the opacity line in my css. But then the block got a whole new look...

Before

After

CSS

 #uicarousel-news-preview-block-1 .ui-carousel-item .views-f开发者_如何学Goield-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;
    }

Is there something wrong with the CSS, or what do I have to do to make sure there is no opacity and the divis still in front of the image?

UPDATE

This is the HTML. It's a Drupal website and the green bar is the views-field-title

---

This should help:

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