Image Slider: Transparent background that doesn't affect text?

[Copernican Theory]

PS 1.6.1.7

Default Theme

 

 

I would like to make the text in the Image Slider easier to read via a semi-transparent text background.  I figured out how to put in the semi-transparent background but it applies the opacity to the text as well.  I'd like to keep the text without the opacity but I can't figure out how.

 

I've been scouring a bunch of CSS help websites and most of the answers say to make this change:

 

From: background-color: #ffffff;

To:      background-color: rgba (255, 255, 255, 0.6)

 

(the 0.6 representing the amount of opacity)

 

Whenever I try to do that the background just reverts to clear.  Perhaps I'm not putting this in the correct place?

 

So right now my code is like this and it shows a semi-transparent text background with faded text:

 

#homepage-slider .homeslider-description {

    position: absolute;

    left: 0;

    top: 0;

    margin: 10px;

    padding: 0px 10px;

    background-color: #c0c0c0;

    opacity: 0.8;

    border: 1px solid black;

    width: 40%;

    padding: 2px 10px;

    cursor: pointer; }

 

The CSS sites say it can be done and I'm thinking maybe this slider works a bit differently.  I'm not a codie, so any help would be grrrrrrrrrreat.

 

 

 

[tdr170]

Can you give a link so we can see what your really trying to do as well as the images with the test.

[Copernican Theory]

I have the site in maintenance but here's a screenie of what I'm attempting:

 

 

The pics are .png if that matters.

Edited September 16, 2016 by Copernican Theory (see edit history)

[rocky]

I've encountered this problem before when developing websites. The problem occurs when the text is a child of the box element and it inherits the opacity of the box. The solution is to use separate divs for the box and text so there is no inheritance. For example, change line 39 (in PrestaShop v1.6.1.7) of themes/default-bootstrap/modules/homeslider/homeslider.tpl from:

								<div class="homeslider-description">{$slide.description}</div>

to:

								<div class="homeslider-box"></div>
								<div class="homeslider-description">{$slide.description}</div>

And then add the following to themes/default-bootstrap/css/modules/homeslider/homeslider.css:

  #homepage-slider .homeslider-box {
    background: #000;
    opacity: 0.5;
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0 }

This looks good in the default PrestaShop theme, though I see you're using a custom theme. Adjust the width and height as necessary until it looks good on your website.  

[Copernican Theory]

Wow - that did the trick all right.  

 

Your score in the Help-O-Meter is way off the charts - seriously, I checked.  Thank you!

 

 

 

Reason for Edit:

 

Is there a way for that box to wrap to the text independently for each slide? 

Edited September 18, 2016 by Copernican Theory (see edit history)

[rocky]

I had another look at this and I've found a more modern solution since the last time I fixed it. You can remove the extra box div and just apply the following to the #homepage-slider .homeslider-description:

background-color: rgba(0, 0, 0, 0.5)

Maybe that will help, since the box and text will have the same width.

[Copernican Theory]

I did try that already and it didn't work for me.  Your original solution works great and I'm sticking with it.  I played around with some things and now it looks like this:

 

Much easier to read.

 

Thanks again.