Udara Suranga Udara Suranga - 3 months ago 29
CSS Question

how to change font color in cycle2 cycle-overlay

I'm using Clycle2 image slider in my web site. I want to change style in cycle-overlay . I can change font size. But by using CSS I can't change font color. It always gives me gray color. please help me with this.

#us-img-container{
margin: 0px;
padding: 0px;
cursor: pointer;
}
#us-container{
width: 100%;
height: auto;
position: relative;
overflow: hidden;
background: #fff;
}
#us-slideshow{
width: 100%;
}
#us-slideshow img{
width: 100%;
}
#us-pager{
height: 70px;
width: 100%;
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
opacity: 0;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#us-slideshow:hover + #us-pager{
opacity: 1;
}
#us-pager:hover {
opacity: 1;
}
#us-prev{
height: 20px;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 15px;
z-index: 1000;
opacity: 0.6;
cursor: pointer;
}
#us-next{
height: 20px;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 10px;
z-index: 1000;
opacity: 0.6;
cursor: pointer;
}
#us-pager img{
height: 60px;
width: 95px;
margin: 5px 5px;
opacity: 0.5;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#us-pager img:hover{
opacity: 1;
transform: scale(1.05);
z-index: 100;
}




/* overlay */
.cycle-overlay {
font-family: NotoSans-Regular !important;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
z-index: 600;
padding: 7px 7px 7px 10px;
background-color: rgba(0, 0, 0, 0.1) !important;
font-size: 16px;
color: rgba(255, 255, 255,1) !important;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}


.cycle-slideshow:hover .cycle-overlay{
bottom: 70px !important;
}


/*
media queries
some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.cycle-slideshow { width: 200px;}
.cycle-overlay { padding: 4px }
.cycle-caption { bottom: 4px; right: 4px }
}


<div class="col-md-12 col-sm-12 col-xs-12 hide" id="us-img-container">
<div id="us-container" style="">
<div id="us-slideshow" class="cycle-slideshow"
data-cycle-fx = "fade"
data-cycle-speed = "600"
data-cycle-timeout = "3000"
data-cycle-pager = "#us-pager"
data-cycle-pager-template = "<a herf= '#'><img src='{{src}}' height= 100 width=150 />"
data-cycle-next = "#us-next"
data-cycle-prev = "#us-prev"
data-cycle-manual-fx = "scrollHorz"
data-cycle-manual-speed = "400"
data-cycle-pager-fx = "fade"

data-cycle-caption-plugin=caption2
data-cycle-overlay-fx-out="slideUp"
accesskey=""data-cycle-overlay-fx-in="fadeOut"
>
<?php
$x = 1;
while ($x < 8) {
?>

<script>
$.ajax({
url: '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg', //or your url
success: function (data) {
document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_PATH_SONGS; ?>/ori/<?php echo $slider_json[$x]['dn_id']; ?>.jpg';
},
error: function (data) {
document.getElementById('slider_<?php echo $x; ?>').src = '<?php echo IMG_DEFAULT; ?>';
}
});
</script>
<img src="" id="slider_<?php echo $x; ?>" onclick="goToDownloads(<?php echo $slider_json[$x]['dn_id']; ?>)"
data-cycle-desc="<?php echo $recent_json[$x]['dn_title']; ?> - <?php echo $slider_json[$x]['artist_name']; ?>" >
<div class="cycle-overlay" style="color: red; "></div>

<?php
$x++;
}
?>

</div>
<div id="us-pager"></div>
<div id="us-prev"><i class="fa fa-angle-left" aria-hidden="true" style="font-size: 26px; color: #000;"></i></div>
<div id="us-next"><i class="fa fa-angle-right" aria-hidden="true" style="font-size: 26px; float: right; color: #000;"></i></div>
</div>
</div>



Answer

I think, i have found the solution. I have commented it in the CSS below.

.cycle-overlay {
    font-family: NotoSans-Regular !important;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    z-index: 600;
    padding: 7px 7px 7px 10px;
    background-color: rgba(0, 0, 0, 0.1) !important;
    font-size: 16px;
    color: rgba(255, 255, 255,1) !important;  /* <-- remove !important */
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

You can also add this line to your code:

.cycle-overlay {
    color: red !important;
}
Comments