CODEWITHSUNDEEP
csstransparencyopacity
Michiel
Michiel

Reputation: 8083

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
enter image description here

After
enter image description here

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;
    }

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 enter image description here

Upvotes: 1

Views: 319

Answers (1)

c-smile
c-smile

Reputation: 27460

This should help:

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

Upvotes: 2

Related Questions