CODEWITHSUNDEEP
htmlcssbackgroundbackground-color
Grishma U
Grishma U

Reputation: 759

Background color on block of text on top of image

I'm trying to display a block of text on top of image in such a way that it displays only on hovering on the image. The text is displaying as I want but, the background applied to the div is not.

Here is the jsfiddle: http://jsfiddle.net/HZqyA/1/

Hovering over the image displays the word stars but, I want it to display with white background underneath the word 'stars'. What am I doing wrong?

Thanks.

CSS from jsfiddle pasted below. Having trouble pasting html




CSS: 
.pu {
    display:block;
    width:185px;
}

.add_rating {
  min-width: 140px;
  display: inline-block;
   background: rgb(255,255,255);
    background-color: rgb(255,255,255);
    color: #f00;
    text-align: center;
}

.pu .add_rating {
    display: none;
    margin-top: -30px;
    margin-bottom: 12px;
    width: 100%;
    background:  rgb(255,255,255);!important;
    background-color:  rgb(255,255,255);!important;
    background-image:  rgb(255,255,255);!important;
    min-height: 22px;
}

.pu:hover .add_rating {
  display: block;
     background:  rgb(255,255,255);!important;
    background-color:  rgb(255,255,255);!important;
    background-image:  rgb(255,255,255);!important;
    z-index: 1000;
}

Upvotes: 1

Views: 2742

Answers (3)

Adrift
Adrift

Reputation: 59799

You need to add a position property other than the default, static so that you can create a new stacking context and so that z-index will apply. Adding position: relative; to .pu:hover .add_rating will enable you to put the background of .add_rating on top of the image.

.pu:hover .add_rating {
display: block;
background:  rgb(255,255,255);
position: relative;
z-index: 1000;
}

http://jsfiddle.net/HZqyA/3/

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

Would you mind if I cleaned some junky CSS in your fiddle? Take a look

Demo

.pu {
    position: relative;
    display: inline-block;
}

.pu:hover .add_rating {
    display: block;
    color: #f00;
}

.add_rating {
    display: none;
    position: absolute;
    bottom: 5px;
    background: #fff;
    width: 100%;
    text-align: center;
}

Note: You are using !important which you should ignore it unless required, I've cropped down your CSS drastically

Upvotes: 2

Sowmya
Sowmya

Reputation: 26969

Use position:absolute to .add_rating and position:relative to parent div

Your CSS is pretty long and that is not really required so compress it like this

.pu {
    display:block;
    width:185px;
    position:relative
}

.add_rating {
    position:absolute;
    bottom:0; left:0;
  min-width: 140px;
   background: rgb(255,255,255);
    color: #f00;
    text-align: center;
    display: none;
    margin-top: -30px;
    margin-bottom: 12px;
    width: 100%;
    min-height: 22px;
}

.pu:hover .add_rating {
      display: block;
}

DEMO

Upvotes: 1

Related Questions