Genesis Responsive Slider – opacity settings doesn't affect PNG transparency

[Sasser]

Hi, I hope somebody can assist. In the Genesis Responsive Slider (GRS) there are a bunch of partly transparent PNGs but the transparency is not working. The goal is to show be able to view the background image through the partly transparent PNGs in the slider.

Example of disappeared transparency

I read in this forum about the opacity settings in the CSS for the GRS lugin, but nothing happens when I adjust. What's wrong?

These are settings in GRS for opacity I tried:

.slide-excerpt {
background-color:transparent;
filter: alpha(opacity=0);
opacity: 0.0;
display: block;
margin: 10px;
padding: 0;
position: absolute;
z-index: 8;
}

---

My company: Sasser Media Lab | Editor at NewsVoice.se

[Tonya]

Hello,

Something within the CSS that is applying a background color to img or one of the classes within the img tag itself.

If you are able to provide a link to the page with the slider, I can take a look. Otherwise, using Firebug or Chrome Dev Tools, walk through each of class declarations starting with the img HTML element itself and then moving out to the wrapper and so on. Look for background or background-color: #fff;

Happy coding,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Sasser]

Thanks for a quick reply. Your tips helped. In fact the problem was not caused by the Genesis Responsive Slider plugin but the ordinary CSS: style.css:

Here:

/* Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video,
.wp-caption {
max-width: 100%;
}

img {
background: #fff;
height: auto;
width: auto; /* IE8 */
}

/* Forms

I just needed to change the background setting into this:

/* Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video,
.wp-caption {
max-width: 100%;
}

img {
background-color:transparent;
height: auto;
width: auto; /* IE8 */
}

/* Forms

And that change also fixed all other transparent pictures in the whole site.

---

My company: Sasser Media Lab | Editor at NewsVoice.se

[Author]

Posts