Before you open up my website, I would like to warn that there is music that automatically plays, so you might want to turn your volume down.
http://thebazingareview.blogspot.com/
1. Go to my site
2. Click view page source
3. CTR F: "slider"
4. Look at the slider CSS code.
If your too lazy to do this I will also provide the code at the bottom.
My problem: Notice how when the images go up and down the background for the box is white. I would like to make the background for this transparent. I have tried putting the Opacity to .5, however, when I do this, it changes the opacity for the images, the background, and the slider word thingy. Is there a way that I can make just the background transparent? So that you cannot see through the words or the pictures, but when they go up you can still see the background? thanks.
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 3px double #CCCCCC;
height: 300px;
margin-bottom: 25px;
margin-top: 0px;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #000000;
width: 800px;
margin: auto;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 300px;
list-style: none outside none;
margin-left: 0;
padding: 0;
position: absolute;
top: -500px
width: 800px;
}
.s3sliderImage {
float: left;
position: relative;
width: 600px;
}
.s3sliderImage span {
background-color: #000000;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 300px;
line-height: 16px;
opacity: 0.7;
overflow: hidden;
padding: 10px 13px;
position: absolute;
right: ;
left: 600px;
top: 0;
width: 175px;
}
.s3sliderImage strong a {
color: #FFFFFF;
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 20px;
}
.s3sliderImage strong a:hover {
color: #FFFFFF;
}