スライダー - アクティブぼかし

Question

私は現在、この

を持っていると私はそれが

に見えるようにしたい私はhaventは私を助けてください働いていた多くのことを試してみました！

私はフクロウカルーセルを使用しています

マイCSS：

#owl-slider .item{ 
    padding: 30px 0px; 
    margin: 10px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 
} 
.customNavigation{ 
    text-align: center; 
} 
.customNavigation a{ 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
.image-fade-left { 
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0)); 
} 

.image-fade-right { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0)); 
} 

私のhtml：

<div class="image-fade-right"> 
    <div class="image-fade-left"> 
     <div id="owl-slider" class="owl-carousel"> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
     </div> 
    </div> 
</div> 

全コード：http://hastebin.com/hevogeqijo.xml

はありがとうございました！

Answer 1

あなたはおそらくこれを行うことによってのみ、一つのクラスの代わりに、2を使用してこれを行うことができます。私がやったこと

.image-fade { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); 
} 

はそれが白だように（2つの境界で、グラデーションに多くの「アンカー」ポイントを追加でrgba(0,0,0,0)）および透明（rgba(0,0,0,1)）を中央に有する。

それとも、あなたは少なくとも可能で、あなたのコードを変更したい場合は、この方法を試してください。

.image-fade-left { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1)); 
} 

.image-fade-right { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); 
}