サイクル2でフォントの色を変更する方法サイクルオーバーレイ

Question

私のウェブサイトでClycle2イメージスライダーを使用しています。サイクルオーバレイでスタイルを変えたい。私はフォントサイズを変更することができます。しかし、CSSを使って私はフォントの色を変更できません。それはいつも私に灰色を与えます。これで私を助けてください。

#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 1

私は私が解決策を見つけた、と思います。私は以下のCSSでコメントしています。

.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; 
} 

また、あなたのコードに次の行を追加することができます。

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