Блог

В настоящее время у меня есть это

и я хочу, чтобы это выглядело так

Я перепробовал много вещей, которые не сработали, пожалуйста, помогите мне!

Я использую owl Carousel

Мой 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

Спасибо!

Вероятно, вы можете сделать это, используя только один класс вместо двух, выполнив это :

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

Что я сделал, так это добавил больше «опорных» точек к градиенту, чтобы он был белым в двух границах ( 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));
}