KstreakOG KstreakOG - 1 month ago 27
jQuery Question

Slider - Active blur

I currently have this

enter image description here

and I want it to look like

enter image description here

I tried many things which havent worked please help me!

I am using owl Carousel

My 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));
}


My 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>


Full Code : http://hastebin.com/hevogeqijo.xml

Thank You!

Answer

You can probably do this using only one class instead of two by doing this :

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

What I did is add more "anchor" points to the gradient, so that it's white in the two borders (rgba(0,0,0,0)) and transparent (rgba(0,0,0,1)) in the center.

Or, if you want to modify your code at least at possible, try this :

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