Adding semi-transparent textbox to carousel

**mjb0390** · 07-27-2012, 09:47 PM

1) Script Title: Background Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bgcarousel.htm

3) Describe problem: I am very new to working with webites. Ive just been self teaching myself by experimenting for about a month. I was tasked with redoing the website as part my internship in a health related field. I was chosen to do this because I had some experience with front page back in junior high.
I love the look of this image carousel and got it to load onto my page fairly easily to my suprize. What I am looking to do is add a semi-transparent box behind my text to make it stand out without it making the font transparent as well. I have gotten so close but now I have the box with white font on the first slide but when it flips to the second image the text is black? I can't figure out what is interfering with it. Below is my HEAD section of my page. Im not sure if this is enough to figure out what is wrong but my page isn't live until I am finished creating it.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>

div.bgcarousel{ /* CSS for main carousel container */
background: black url(N:/My Webs/myweb/images/Slideshow/Program Files/ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
width:475px; /* default dimensions of carousel */
height:290px;
}

img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}

div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: contain; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

div.selectedslide{ /* CSS for currently selected slide */
}

div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 0px;
bottom: 0px;
width: 475px; 
padding-left: 20px;
padding-bottom: 10px;
font: bold 14px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
<span>
.alpha60 { 
/* Fallback for web browsers that don't support RGBa */ 
background-color: rgb(0, 0, 0); 
/* RGBa with 0.6 opacity */ 
background-color: rgba(0, 0, 0, 0.6); 
/* For IE 5.5 - 7*/ 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
/* For IE 8*/ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
</span>
}

div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font: 18px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}
body         { background-image: url('_themes/canvas/cnvbkgnd.jpg'); background-repeat: 
               repeat; background-attachment: fixed }
</style>

<link href="file:///N:/My%20Webs/myweb/navbar/simplenavbarstyles.css" rel="stylesheet" type="text/css">





<meta name="Microsoft Theme" content="copy-canvas 1111">
<meta name="Microsoft Border" content="tb, default">
</head>

Thank you so much for any input you have!!
MJB0390

**bernie1227** · 07-28-2012, 09:30 AM

Could this have anything to do with it?:

Code:

div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: contain; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

**mjb0390** · 07-30-2012, 02:52 PM

I tried you suggestion but it didn't change anything unfortunately =/

**mjb0390** · 08-03-2012, 01:43 PM

Well I got it so that the text stays white but my problem now is that when I make the textbox semi-transparent it also makes the text semi-transparent. Is there a way to make the box semi-transparent but leave the text fully opaque?

This is the CSS I have for my carousel.

Code:

div.bgcarousel{ /* CSS for main carousel container */
background: black url(images/Slideshow/Program Files/ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
width:475px; /* default dimensions of carousel */
height:290px;
}

img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}

div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
}

div.selectedslide{ /* CSS for currently selected slide */
}

div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 0px;
bottom: 0px;
width: 475px; 
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
font: 14px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
}



div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
background-color: #333333;
filter:alpha(opacity=80);
opacity:0.8;
}

div.slide div.desc h2{
font: 18px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

Thank you all for your ideas!

**traq** · 08-03-2012, 05:39 PM

Originally Posted by mjb0390

when I make the textbox semi-transparent it also makes the text semi-transparent. Is there a way to make the box semi-transparent but leave the text fully opaque?

you're using the wrong css property. opacity applies to an entire element (including its contents). It is supposed to work that way, and you can't make it work any other way.

If you want only the background to be semi-transparent, use the background property:

Code:

.selectedslide .desc{ 

  /* fallback option #1: solid color
      where rgba isn't supported, you simply have no transparency.
      this (almost) never brings about "the end of the world."
      (my preference.) */
  background: #333;

  /* fallback option #2: pic w/transparency
      uses more resources + a bit self-defeating
      (everyone downloads the pic anyway, so why bother w/css3?)
      but works just about everywhere
      (can even be made to work in IE6) */
  background: url( 'semi_transparent_grey_tile.png' );

  /* css3 */
  background: rgba( 51,51,51,0.8 );

}