'Blur effect on the bottom side of scrolling container

I want to achieve blur effect on the items at the end of scrollable container.My list is vertical and I want to see the blur effect towards the bottom. but currently there is no blur effect taking in place.

I have this so far:

.main-container {
  position: relative;
  height: 100px;
}

.main-container .scrollable-nav {
  overflow: scroll;
  height: 100%;
}

.list-item-container {
  list-style: none;
  font-size: 20px;
}

li {
  padding-right: 30px;
}

.main-container::after {
  content: '';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  height: calc(100% - 20px);
  right: 0;
  position: absolute;
  z-index: 9999999;
  margin-left: auto;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 5%, #fff 100%);
}

https://jsfiddle.net/n1y57zt9/

any idea/help appreciated!

thanks

htmlcss


Solution 1:[1]

Make the item to have blur effect at the end, apply background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 5%, #fff 100%) to the list(change the parameter a little bit):

code copied from your fiddle and change the background to black since your blur effect (linear-graident is white)

body{
  background-color:black;

}
.main-container {
  position: relative;
  height: 100px;
}

.main-container .scrollable-nav {
  overflow: scroll;
  height: 100%;
}

.list-item-container {
  list-style: none;
  font-size: 20px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 80%, #fff 100%);
}

li {
  padding-right: 30px;
}
li:last-child {
 
}
<div class="main-container">
  <div class="scrollable-nav right-bg">
    <ul class="list-item-container ">
      <li class="m-item">menuItem1</li>
      <li class="m-item">menuItem2</li>
      <li class="m-item">menuItem3</li>
      <li class="m-item">menuItem4</li>
      <li class="m-item">menuItem5</li>
      <li class="m-item">menuItem6</li>
      <li class="m-item">menuItem7</li>
      <li class="m-item">menuItem8</li>
    </ul>
  </div>
</div>

Give that effect only to the last element, use css pseudo selector :last-child

body{
  background-color:black;

}
.main-container {
  position: relative;
  height: 100px;
}

.main-container .scrollable-nav {
  overflow: scroll;
  height: 100%;
}

.list-item-container {
  list-style: none;
  font-size: 20px;

}

.list-item-container > .m-item:last-child{
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 5%, #fff 100%);

}
li {
  padding-right: 30px;
}
<div class="main-container">
  <div class="scrollable-nav right-bg">
    <ul class="list-item-container ">
      <li class="m-item">menuItem1</li>
      <li class="m-item">menuItem2</li>
      <li class="m-item">menuItem3</li>
      <li class="m-item">menuItem4</li>
      <li class="m-item">menuItem5</li>
      <li class="m-item">menuItem6</li>
      <li class="m-item">menuItem7</li>
      <li class="m-item">menuItem8</li>
    </ul>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James

Related Questions