/* CONTENT */ #slider-holder{width: 610px;height: 320px;overflow: hidden; margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 35px 0 0 0;} #s3slider { width: 610px; /* important to be same as image width */ height: 320px; /* important to be same as image height */position: relative; /* important */overflow: hidden; /* important */} #s3sliderContent {width: 610px; /* important to be same as image width or wider */ position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */} .s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */} .s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff; padding: 10px 15px 13px 13px; height: 38px; width: 610px; background-color: #4e4d3c; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ display: none; /* important */bottom: 0;/* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image*/} .s3sliderImage span a.featured-title:link, .s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;} .s3sliderImage span a.featured-title:hover{color: #999;} .s3sliderImage span a:link, .s3sliderImage span a:visited{color: #888;} .s3sliderImage span a:hover{color: #555;}