Live Code Editor Version 2.0

Hướng dẫn thêm Image Effects với CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
      .container {
        width: 700px;
        margin: auto;
        text-align: center;
      }
      div {
        width: 40%;
        height: 300px;
        margin-bottom: 30px;
        display: inline-block;
      }
      #btn {
        margin: auto;
        width: 100px;
        height: 30px;
        margin-bottom: 10px;
        display: block;
      }
      .grayscale {
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
      }
      .blur {
        -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: blur(5px);
      }
    </style>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn thêm Image Effects</h2>

<button onclick="addEffects()" id="btn">Xem hiệu ứng</button>
        <div>
          <h3> Grayscale</h3>
          <img src="https://freetuts.net/upload/tut_post/images/2017/08/02/973/demo.jpg"  id="grayscale" alt="car" width="100%" height="50%">
        </div>
        <div>
          <h3> Blur</h3>
          <img src="https://freetuts.net/upload/tut_post/images/2017/08/02/973/demo.jpg"  id="blur" alt="car" width="100%" height="50%">
        </div>
      </div>
    </body>
    <script>
      function addEffects(){
        var blur = document.getElementById('blur');
        var grayscale = document.getElementById('grayscale');
        grayscale.classList.add("grayscale");
        blur.classList.add("blur");
      }
    </script>
</html>