title: Cut part of image CSS
body: <p>Im tring to create a glitch image animation effect.</p>
  <p>I use layers with mix blend modes, and clip paths. but how can I cut part of the main image?</p>
  <p>Since I want to achieve the effect of displacing a piece of the picture. Main background can be image too, thats why I can't use background-color in layers.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;glitch-image&quot;&gt;
    &lt;img class=&quot;glitch-image__image&quot; src=&quot;https://clipart-db.ru/file_content/rastr/bmw_002.png&quot; alt=&quot;&quot;/&gt;
    &lt;div class=&quot;glitch-image__glitch&quot; style=&quot;background-image: url(https://clipart-db.ru/file_content/rastr/bmw_002.png)&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>
  body
    display flex
    background-color #000
    min-height 70vh
    box-sizing: border-box
    *
      box-sizing: border-box
  
  
  .glitch-image
    width 100%
    max-width 500px
    margin auto
    position relative
    &amp;__image
      max-width 100%
      position relative
      z-index 1
      display block
      vertical-align top
      filter: drop-shadow(0px 15px 15px #fff);
    &amp;__glitch
      position absolute
      left 40px
      top 0
      bottom 0
      right 0
      width 100%
      height 100%
      background-size 100%
      background-repeat no-repeat
      z-index 2
      // animation: glitch-anim-1 2s infinite linear alternate;
      clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
      filter: sepia(1) hue-rotate(303deg) brightness(100%) saturate(200%) drop-shadow(5px 5px 25px red);
  
  
  @keyframes glitch-anim-1 {
      0% {
          clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
      }
      10% {
          clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
      }
      20% {
          clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
      }
      30% {
          clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
      }
      40% {
          clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
      }
      50% {
          clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
      }
      60% {
          clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
      }
      70% {
          clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
      }
      80% {
          clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
      }
      90% {
          clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
      }
      100% {
          clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
      }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>function random_polygon() {
    
  }
  </code></pre>
  <p><a href="https://codepen.io/venegrad/pen/dyvqGvE" rel="nofollow noreferrer">See code pen</a></p>