Make the last visible item blurry in owl-carousel

Question

I am using owl-carousel, and i would like to make the last item that is visible, a little blurry. I maked a photo in photoshop, that what i want.

<div class="owl-carousel owl-theme owl_carousel_1">
                                    <div class="item">
                            <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="main_hir_img_link" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">
                                <img class="img-responsive main_news_thumb  radius" src="/images/news/th-44555-71.jpg" alt="Utalással is fizethető az egészségügyi szolgáltatási járulék">
                            </a>
                            <h3 class="event_title my-2"><a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" title="Utalással is fizethető az egészségügyi szolgáltatási járulék" class="event_title_link text-black">Utalással is fizethető az egészségügyi szolgáltatási járulék</a></h3>
                            <p class="event_desc">2024-ben havi 11 300 forintot kell fizetniük azoknak, akik nem biztosítottak és más módon sem jogosultak az egészségügyi ellátásra.</p>
                            <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="news_list_to_link d-block text-black" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
                        </div>
                                            <div class="item">
                            <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="main_hir_img_link" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">
                                <img class="img-responsive main_news_thumb  radius" src="/images/news/th-44-283.jpg" alt="2024. évi nyitvatartási idő Pécel Város Óvodáiban">
                            </a>
                            <h3 class="event_title my-2"><a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban" class="event_title_link text-black">2024. évi nyitvatartási idő Pécel Város Óvodáiban</a></h3>
                            <p class="event_desc">Tájékoztatjuk a Tisztelt Szülőket, hogy a 2024. évben Pécel Város Óvodáiban (PVO) az 1. a heti nyitvatartási idő 60 óra, munkanapokon 6:00 óra és 18:00 óra között.</p>
                            <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="news_list_to_link d-block text-black" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
                        </div>
                                            <div class="item">
                            <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="main_hir_img_link" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">
                                <img class="img-responsive main_news_thumb  radius" src="/images/news/th-33-882.jpg" alt="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">
                            </a>
                            <h3 class="event_title my-2"><a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása" class="event_title_link text-black">Még egy hónapig kérhető az szja-bevallási tervezetek postázása</a></h3>
                            <p class="event_desc">Március 15-étől mindenki megnézheti szja-bevallási tervezetét, legegyszerűbben a Nemzeti Adó- és Vámhivatal (NAV) Ügyfélportálján vagy eSZJA-oldalán.</p>
                            <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="news_list_to_link d-block text-black" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
                        </div>
                                            <div class="item">
                            <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="main_hir_img_link" title="Képviselő-testületi ülés - 2024. február 28.">
                                <img class="img-responsive main_news_thumb  radius" src="/images/news/th-22-532.jpg" alt="Képviselő-testületi ülés - 2024. február 28.">
                            </a>
                            <h3 class="event_title my-2"><a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" title="Képviselő-testületi ülés - 2024. február 28." class="event_title_link text-black">Képviselő-testületi ülés - 2024. február 28.</a></h3>
                            <p class="event_desc">Pécel Város Önkormányzatának Képviselő-testülete 2024. február 28. napján (szerda) 8.00 órai kezdettel rendes képviselő-testületi ülést tart, melyre tisztelettel meghívom.</p>
                            <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="news_list_to_link d-block text-black" title="Képviselő-testületi ülés - 2024. február 28.">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
                        </div>
                            </div>

I was searching for this, but didnt find nothing.

Answer 1

It would have been better if you provided us with your css code as well. Here is an example on how you can set a sort of blur on your last image. You can use a wrapping div on your image together with a pseudo element and adding an inset box-shadow. Here I selected the last image wrapping div with class .blurry using the css last-child.

.owl-carousel{
  display: flex;
  gap: 10px;
  flex-direction: row;
}

.blurry{
  position: relative;
  height: fit-content;
  width: fit-content;
}

 .item, .item a{
  max-width: 200px;
}

.item:last-child .blurry::before{
  content: "";
  width:0px;
  height: 160px;
  position: absolute;
  top: 0;
  right: 0px;
  overflow: hidden;
  box-shadow: -0px 15px 40px 50px white;
}

<div class="owl-carousel owl-theme owl_carousel_1">
    <div class="item">
<a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="main_hir_img_link" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">
  <div class="blurry">
    <img class="img-responsive main_news_thumb  radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28.">
  </div>
</a>
<h3 class="event_title my-2"><a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" title="Utalással is fizethető az egészségügyi szolgáltatási járulék" class="event_title_link text-black">Utalással is fizethető az egészségügyi szolgáltatási járulék</a></h3>
<p class="event_desc">2024-ben havi 11 300 forintot kell fizetniük azoknak, akik nem biztosítottak és más módon sem jogosultak az egészségügyi ellátásra.</p>
<a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="news_list_to_link d-block text-black" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
</div>
            <div class="item">
<a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="main_hir_img_link" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">
  <div class="blurry">
    <img class="img-responsive main_news_thumb  radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28.">
  </div>
</a>
<h3 class="event_title my-2"><a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban" class="event_title_link text-black">2024. évi nyitvatartási idő Pécel Város Óvodáiban</a></h3>
<p class="event_desc">Tájékoztatjuk a Tisztelt Szülőket, hogy a 2024. évben Pécel Város Óvodáiban (PVO) az 1. a heti nyitvatartási idő 60 óra, munkanapokon 6:00 óra és 18:00 óra között.</p>
<a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="news_list_to_link d-block text-black" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
</div>
            <div class="item">
<a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="main_hir_img_link" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">
  <div class="blurry">
    <img class="img-responsive main_news_thumb  radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28.">
  </div>
</a>
<h3 class="event_title my-2"><a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása" class="event_title_link text-black">Még egy hónapig kérhető az szja-bevallási tervezetek postázása</a></h3>
<p class="event_desc">Március 15-étől mindenki megnézheti szja-bevallási tervezetét, legegyszerűbben a Nemzeti Adó- és Vámhivatal (NAV) Ügyfélportálján vagy eSZJA-oldalán.</p>
<a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="news_list_to_link d-block text-black" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
</div>
            <div class="item">
<a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="main_hir_img_link" title="Képviselő-testületi ülés - 2024. február 28."> 
  <div class="blurry">
    <img class="img-responsive main_news_thumb  radius" src="https://picsum.photos/seed/picsum/200" alt="Képviselő-testületi ülés - 2024. február 28.">
  </div>
</a>
<h3 class="event_title my-2"><a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" title="Képviselő-testületi ülés - 2024. február 28." class="event_title_link text-black">Képviselő-testületi ülés - 2024. február 28.</a></h3>
<p class="event_desc">Pécel Város Önkormányzatának Képviselő-testülete 2024. február 28. napján (szerda) 8.00 órai kezdettel rendes képviselő-testületi ülést tart, melyre tisztelettel meghívom.</p>
<a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="news_list_to_link d-block text-black" title="Képviselő-testületi ülés - 2024. február 28.">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
</div>
</div>