Fix opacity issue with caption container

jquery.nivo.slider.js

@@ -87,12 +87,12 @@
             $('.nivo-box').remove();
         });
 
-        //Create caption
-        slider.append($('<div class="nivo-caption"></div>'));
+        // Create caption
+        slider.append($('<div class="nivo-caption"><div class="backdrop"></div><div class="nivo-caption-text"></div></div>'));
 
         // Process caption function
         var processCaption = function(settings){
-            var nivoCaption = $('.nivo-caption', slider);
+            var nivoCaption = $('.nivo-caption-text', slider);
             if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
                 var title = vars.currentImage.attr('title');
                 if(title.substr(0,1) == '#') title = $(title).html();   
@@ -659,4 +659,4 @@
 
     $.fn._reverse = [].reverse;
 
-})(jQuery);
+})(jQuery);

nivo-slider.css

@@ -63,20 +63,29 @@
 	position:absolute;
 	left:0px;
 	bottom:0px;
-	background:#000;
 	color:#fff;
 	width:100%;
 	z-index:8;
-	padding: 5px 10px;
-	opacity: 0.8;
 	overflow: hidden;
-	display: none;
-	-moz-opacity: 0.8;
-	filter:alpha(opacity=8);
 	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
 	box-sizing: border-box;         /* Opera/IE 8+ */
 }
+.nivo-caption .backdrop {
+	position: absolute;
+	background: #000;
+	bottom: 0;
+	height: 100%;
+	-moz-opacity: 0.8;
+	opacity: .8;
+	filter: alpha(opacity=8);
+	width: 100%;
+}
+.nivo-caption .nivo-caption-text {
+	display: none;
+	position: relative;
+	padding: 5px 10px;
+}
 .nivo-caption p {
 	padding:5px;
 	margin:0;
@@ -110,4 +119,4 @@
 }
 .nivo-controlNav a.active {
 	font-weight:bold;
-}
+}