CSS filter test

In this example below you will see how to do a CSS filter test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Napzu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Napzu ©
  • HTML
  • CSS
  • JavaScript
    <div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate numquam, at, rem itaque delectus, dolorum doloribus animi odit totam debitis, sapiente eligendi consequatur vel. Molestiae, officiis quisquam atque id maiores? 123<br>
  <img src="http://lorempixel.com/400/200/animals/1">
  <img src="http://lorempixel.com/400/200/animals/2">
  <img src="http://lorempixel.com/400/200/animals/3">
  <img src="http://lorempixel.com/400/200/animals/4">
  <div id="test"></div>
</div>

/*Downloaded from https://www.codeseek.co/Napzu/css-filter-test-yXXjVL */
    body
  transition 500ms
  &:hover  
    // filter blur(5px) grayscale(100%)
    filter blur(20px) contrast(200%)    


/*Downloaded from https://www.codeseek.co/Napzu/css-filter-test-yXXjVL */
    

Comments