title: How to fade out an image from right to left?
body: <p>I want an image to be faded out from right to left. It should fade as we can see it's original clear view at the 70% right of it and start gradually fading out at the left 30% of it. </p>
  
  <p>This is how I want it to look:</p>
  
  <p><img src="https://i.stack.imgur.com/4DOch.jpg" alt="attachment"></p>
  
  <p>This is my code:</p>
  
  <pre class="lang-css prettyprint-override"><code>#main_section {
    /*   border: 1px solid blue; */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
  }
  #main_section li {
    margin-left: 5px;
    display: inline-block;
    font-family: Euphemia;
    font-weight: bold;
    color: green;
  }
  .style_number {
    font: italic 1.2em Georgia, Times, serif;
    font-weight: bold;
    color: #4169E1;
  }
  #img1::before {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    content: "\00a0";
    height: 50%;
    position: absolute;
    width: 50%;
  }
  #img1 {
    float: right;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section id="main_section"&gt;
    &lt;marquee behavior="alternate"&gt;We are coming soon, please check back later.&lt;/marquee&gt;
  
    &lt;img src="img_ak/image_1st_body.jpg" id="img1" width="650" height="300" alt="" /&gt;
    &lt;ol&gt;
      &lt;li&gt;
        &lt;span class="style_number"&gt;1.&lt;/span&gt; INKOMSTDEKLARATION
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;span class="style_number"&gt;2.&lt;/span&gt; MOMSDEKLARATION
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;span class="style_number"&gt;3.&lt;/span&gt; BOLAGSBILDNING
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;span class="style_number"&gt;4.&lt;/span&gt; EKONOMI KONSLUT
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;span class="style_number"&gt;5.&lt;/span&gt; LÖPANDE BÖKFÖRING
      &lt;/li&gt;
      &lt;li&gt;
        &amp;nbsp;&amp;nbsp;&lt;span class="style_number"&gt;6.&lt;/span&gt; BOKSLUT &amp; ÅRSREDOVISNING
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;
        &lt;span class="style_number"&gt;7.&lt;/span&gt; SKATTEDEKLARATION
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;
        &lt;span class="style_number"&gt;8.&lt;/span&gt; LÖNEADMINISTRATION
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;
        &lt;span class="style_number"&gt;9.&lt;/span&gt; FAKTURERING
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;
        &lt;span class="style_number"&gt;10.&lt;/span&gt; ONE MORE
      &lt;/li&gt;
    &lt;/ol&gt;
  
  &lt;/section&gt;
  </code></pre>