title: How to do a Read More over text with some transparency?
body: <p>I am trying to do a Read More button which must be over the hidden text, and the hidden text must have some transparency you can barely see it, like this example:</p>
  
  <p><strong><em>(Ignore the turquoise colour cells)</em></strong>
  <a href="https://i.stack.imgur.com/6R1RR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6R1RR.png" alt="enter image description here"></a></p>
  
  <p>I did it at first with SCSS and no JS at all. But now my client change his mine and he wants it that way.
  Here is what I have done so far: <a href="https://codepen.io/maketroli/pen/zzNKqR" rel="nofollow noreferrer">https://codepen.io/maketroli/pen/zzNKqR</a></p>
  
  <p>SCSS:</p>
  
  <pre><code>// READ MORE BASE
  .read-more-wrap {
  
    .read-more-state
    // .read-more-state: This is the input checkbox. We want this to be the first child after the wrap element.
    // HTML Usage: &lt;input type="checkbox" class="read-more-state" id="_uniqueID_" name="toggle" /&gt;
      {
        display: none; //We don't want to show the text boxes
  
        // add ellipsis if it's within a paragraph
        ~ p .read-more-trigger,
        ~ * p .read-more-trigger {
          &amp;:before {
            content: '\2026' ' '; //ellipsis
            color: #444;
          }
        }
  
        ~ .read-more-trigger, 
        ~ * .read-more-trigger {
        // .read-more-trigger: This is used to trigger the action. It's actually the label for the .read-more-state checkbox, which we declare below.
        // HTML Usage: &lt;label for="_uniqueID_" class="read-more-trigger"&gt;&lt;/label&gt;
        // SCSS Sytax: When the trigger is a sibling, or the child of any sibling of .read-more-state within .read-more-wrap
          cursor: pointer;
          color: #008dec;
          max-width: 670px;
          margin-bottom: .25em;
  
          &amp;:hover, &amp;:focus, &amp;:active {
            color: #ff4500;
          }
  
          &amp;:after {
            content: 'Show more';
            border-bottom: 1px dotted #ccc;
            white-space: nowrap;
            font-size: 90%;
            letter-spacing: -.3px;
          }
        } // end .read-more-trigger
  
        ~ .read-more-target,
        ~ * .read-more-target {
        // .read-more-target: This is what gets shown or hidden when the trigger is pressed.
        // HTML Usage: &lt;span class="read-more-target"&gt;content&lt;/span&gt; - Note that this can be a span, a div, a p, or any other element that you want to show or hide, as long as it's a sibling, or the child of a sibling of .read-more-state
        // SCSS Syntax: When the target is a sibling, or the child of any sibling of read-more-state, then that target's state is:
          opacity: 0;
          max-height: 0;
          font-size: 0;
          visibility: hidden;
          transition: .125s linear;
        }
  
        // when .read-more-state is checked:
        &amp;:checked {
          ~ * .read-more-target, 
          ~ .read-more-target {
            opacity: 1;
            max-height: 999em;
            font-size: inherit;
            visibility: visible;
          }
  
          ~ .read-more-trigger:before,
          ~ * .read-more-trigger:before {
            content: '';
          }
  
          ~ .read-more-trigger:after,
          ~ * .read-more-trigger:after {
            content: 'Show less';
          }
        }  // &amp;:checked
      } // .read-more-state 
  }
  // END READ MORE BASE
  
  // BEGIN MOBILE ONLY
  .read-more-wrap--mobile {
    @extend .read-more-wrap;
    .read-more-state {
      @media screen and (min-width: 720px) {
        ~ * .read-more-target, 
        ~ .read-more-target {
              opacity: 1;
              max-height: 999em;
              font-size: inherit;
              visibility: visible;
        }
      }
      :checked {
        ~ * .read-more-target, 
        ~ .read-more-target {        
            @media screen and (min-width: 720px) {
              opacity: 1;
              max-height: 999em;
              font-size: inherit;
              visibility: visible;
            }
        }
      }
  
      ~ .read-more-trigger, 
      ~ * .read-more-trigger {
        @media screen and (min-width: 720px) {
          display: none;
        }
      }
    }
  }
  // END MOBILE ONLY
  
  /* Other style */ 
  body {
    padding: 2%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="read-more-wrap--mobile"&gt;
    &lt;input type="checkbox" class="read-more-state" id="mobile" name="toggle" /&gt;
    &lt;h2&gt;Read more wrap&lt;/h2&gt;
    &lt;p&gt;Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical&lt;span class="read-more-target"&gt;  cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. &lt;/span&gt;&lt;label for="mobile" class="read-more-trigger"&gt;&lt;/label&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tagged JS in case there is a solution with it.
  So, any suggestions?</p>