I have implemented a slideshow, and successfully managed to display the description in yellow as desired.
However, I am facing an issue where the title (H2) above the description is not visible unless hovered over. Here is the current CSS I am using:
.slideshow_container { background: #000; }
.slideshow_container a { text-decoration: none; }
.slideshow_container .slideshow_slide { margin-right: 2px; }
.slideshow_container .slideshow_slide_text h2 { color: #FFFFFF; text-align: left;
font-size: 1.3em; }
.slideshow_container .slideshow_slide_text p { color: #FFFF00; font-weight: bold;
text-align: left; }
.slideshow_container .slideshow_slide_image { }
.slideshow_container .slideshow_slide_video { }
.slideshow_container .slideshow_description { background: #000; width: 100%; }
.slideshow_container .slideshow_description h2 { color: #FFFFFF; font-size: 1.3em;
text-align: left; }
.slideshow_container .slideshow_description p { color: #FFFF00; font-size: 1.1 em;
font-weight: bold; text-align: left; }
.slideshow_container .slideshow_description a { color: #FFFF00; font-weight: bold; }
.slideshow_container .slideshow_transparent { filter: alpha(opacity = 50); opacity: 0.5; }
.slideshow_container .slideshow_transparent:hover { filter: alpha(opacity = 80); opacity:
0.8; }
Here is the HTML code being used:
<div class="slideshow_container slideshow_container_slideshow-jquery-image-gallery-custom-
styles_1" style="height: 600px; max-width: 660px;" data-session-id="0"><div
class="slideshow_controlPanel slideshow_transparent"><ul><li
class="slideshow_togglePlay"></li></ul></div><div
class="slideshow_button slideshow_previous slideshow_transparent"></div><div
class="slideshow_button slideshow_next slideshow_transparent"></div><div
class="slideshow_pagination"><div
class="slideshow_pagination_center"></div></div><div
class="slideshow_content" style="display: none;"><div
class="slideshow_view"><div
class="slideshow_slide slideshow_slide_image"> <a
target="_self" > <img src="http://www.occupyhln.org/wp-content/uploads/2013/07/Audrey-
Edmunds.jpg" alt="Audrey Edmunds" width="1000" height="588" /> </a><div
class="slideshow_description slideshow_transparent">
<h2><a target="_self" >Audrey Edmunds</a></h2>
<p><a target="_self" >Here, Audrey Edmunds poses at the John C. Burke Correctional Center
in Waupun, Wis., 10 years into serving her 18-year conviction and sentence for shaking a
baby to death, while babysitting. She was freed in Feb., 2008 after an appeals court said
new research into the syndrome cast doubt on her guilt. According to Northwestern
University's Center on Wrongful Convictions, experts asserted that symptoms they once
thought were proof of Shaken Baby Syndrome can be from other causes, including accidents,
illness, infection, old injuries, and congenital defects.</a></p>
</div></div><div style="clear: both;"></div></div>
The paragraph section appears to be functioning correctly with yellow descriptions. However, I aim to make the heading white to enhance visibility without having to hover over the titles above the paragraph.
To view the slideshow, please visit this specific page. I have attempted to inspect it with Firebug, but no solution has been found yet.
Your assistance in resolving this matter would be highly appreciated!