You can't clear the Opacity from text.
You have to set the background-color according to the need.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pretty Simple Content Slider with jQuery and CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Pretty Simple Content Slider with jQuery and CSS3" />
<meta name="keywords" content="jquery,css3, content slider, slide, auto-play" />
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
/*background:#C1C7D5 url(title.png) no-repeat top center;*/
}
a.back {
/*background:transparent url(back.png) no-repeat top left;*/
position: fixed;
width: 150px;
height: 27px;
outline: none;
bottom: 0px;
left: 0px;
}
#content {
margin: 150px auto 10px auto;
}
.reference {
clear: both;
width: 800px;
margin: 30px auto;
}
.reference p a {
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
color: #666;
text-decoration: none;
font-size: 10px;
}
.reference p a:hover {
color: #333;
}
.rotator {
background-color: #222;
width: 800px;
height: 300px;
margin: 0px auto;
position: relative;
font-family: 'Myriad Pro',Arial,Helvetica,sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
border: 3px solid #f0f0f0;
overflow: hidden;
-moz-box-shadow: 0px 0px 10px;
-webkit-box-shadow: 0px 0px 10px #222;
box-shadow: 0px 0px 10px #222;
}
img.bg {
position: absolute;
top: 0px;
left: 0px;
}
.rotator ul {
list-style: none;
position: absolute;
right: 0px;
top: 0px;
margin-top: 6px;
z-index: 999999;
}
.rotator ul li {
display: block;
float: left;
clear: both;
width: 260px;
}
.rotator ul li a {
width: 230px;
float: right;
clear: both;
padding-left: 10px;
text-decoration: none;
display: block;
height: 52px;
line-height: 52px;
background-color: #222;
margin: 1px -20px 1px 0px;
opacity: 0.7;
color: #f0f0f0;
font-size: 20px;
border: 2px solid #000;
border-right: none;
outline: none;
text-shadow: -1px 1px 1px #000;
-moz-border-radius: 10px 0px 0px 20px;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-left-radius: 200px;
border-top-left-radius: 10px;
border-bottom-left-radius: 20px;
}
.rotator ul li a:hover {
text-shadow: 0px 0px 2px #fff;
}
.rotator .heading {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
}
.rotator .heading h1 {
text-shadow: -1px 1px 1px #555;
font-weight: normal;
font-size: 46px;
padding: 20px;
}
.rotator .description {
width: 500px;
height: 80px;
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px;
background-color: #222;
-moz-border-radius: 0px 10px 0px 0px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
/*opacity: 0.7;*/
/*background-color: rgba(0, 0, 0, 0.7);*/
/* 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)";*/
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.rotator .description p {
text-shadow: -1px 1px 1px #000;
text-transform: none;
letter-spacing: normal;
line-height: 26px;
}
a.more {
color: orange;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
a.more:hover {
color: #fff;
}
</style>
<div id="content">
<a class="back" href=""></a>
<!-- ---------First Slider--------- -->
<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Portfolio</a>
<div style="display: none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
Portfolio: At vero eos et accusamus et iusto odio
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Services</a>
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">We serve</div>
<div class="info_description">
Services: At vero eos et accusamus et iusto odio
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt="" />
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
<!-- ---------Second Slider--------- -->
<div class="rotator">
<ul id="rotmenu1">
<li>
<a href="rot11">Portfolio</a>
<div style="display: none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
Portfolio: At vero eos et accusamus et iusto odio
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot21">Services</a>
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">We serve</div>
<div class="info_description">
Services: At vero eos et accusamus et iusto odio
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot11">
<img src="" width="800" height="300" class="bg" alt="" />
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script type="text/javascript">
$(function () {
//< !-- --------- First Slider--------- -->
var current = 1;
var iterate = function () {
var i = parseInt(current + 1);
var lis = $('#rotmenu').children('li').size();
if (i > lis) i = 1;
display($('#rotmenu li:nth-child(' + i + ')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate, 3000);
$('#rotmenu li').bind('click', function (e) {
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem) {
var $this = elem;
var repeat = false;
if (current == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
//$(this).animate({ 'opacity': '0.7' }, 700);
$(this).css("background-color", "#BD0A72");
$(this).css("font-weight", "bold")
});
current = parseInt($this.index() + 1);
var elem = $('a', $this);
elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300).css("background-color", "#FF0094").css("font-weight", "bold");
var info_elem = elem.next();
$('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot1 .description').animate({ 'bottom': '-270px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '800').attr('height', '300')
);
}
//< !-- --------- Second Slider--------- -->
var current1 = 1;
var iterate = function () {
var i = parseInt(current1 + 1);
var lis = $('#rotmenu1').children('li').size();
if (i > lis) i = 1;
display1($('#rotmenu1 li:nth-child(' + i + ')'));
}
display1($('#rotmenu1 li:first'));
var slidetime1 = setInterval(iterate, 3000);
$('#rotmenu1 li').bind('click', function (e) {
clearTimeout(slidetime1);
display1($(this));
e.preventDefault();
});
function display1(elem) {
var $this = elem;
var repeat = false;
if (current1 == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current1 + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
$(this).css("background-color", "#BDA0BD");
$(this).css("font-weight", "bold");
});
current1 = parseInt($this.index() + 1);
var elem1 = $('a', $this);
elem1.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300).css("background-color", "#FFD6FF");;
var info_elem = elem1.next();
$('#rot11 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot11 .description').animate({ 'bottom': '-270px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot11').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot11 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '800').attr('height', '300')
);
}
});
</script>
</body>
</html>
