So this is what I want to achieve:

(Ignore the turquoise cells)

As you may see, the whole text is blurry because of the gradiente which should be over the text. When you click on the READ MORE button, the element should go until the bottom and remove the gradient, and when you click on READ LESS, it should get back to its original state.

Right now the design doesn't look like the one I did in the code and I need it exactly. But I am running out of ideas in order to get the same exact same thing as in the design.

Any suggestions?

And this is the code:

$(document).ready(function(){
    var toggleReadMore = function() {
      $('#read-more').click(function(e) {
          $(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
          $(this).hide();
          $(this).next('#read-less').show();
      });
      $('#read-less').click(function(e) {
          $(this).prev().prev().animate({height: '90px'}, 400);
          $(this).hide();
          $(this).prev('#read-more').show();
      });

    };
    toggleReadMore();
}());

#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}

<script src=".1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt modo. High Life food truck jean shorts in. Blog asymmetrical 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. </p>
  <div id='read-more'>
    READ MORE
  </div>
   <div id='read-less'>
    READ LESS
  </div> 
</div>

So this is what I want to achieve:

(Ignore the turquoise cells)

As you may see, the whole text is blurry because of the gradiente which should be over the text. When you click on the READ MORE button, the element should go until the bottom and remove the gradient, and when you click on READ LESS, it should get back to its original state.

Right now the design doesn't look like the one I did in the code and I need it exactly. But I am running out of ideas in order to get the same exact same thing as in the design.

Any suggestions?

And this is the code:

$(document).ready(function(){
    var toggleReadMore = function() {
      $('#read-more').click(function(e) {
          $(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
          $(this).hide();
          $(this).next('#read-less').show();
      });
      $('#read-less').click(function(e) {
          $(this).prev().prev().animate({height: '90px'}, 400);
          $(this).hide();
          $(this).prev('#read-more').show();
      });

    };
    toggleReadMore();
}());

#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt modo. High Life food truck jean shorts in. Blog asymmetrical 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. </p>
  <div id='read-more'>
    READ MORE
  </div>
   <div id='read-less'>
    READ LESS
  </div> 
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 17, 2017 at 21:12 ReactingReacting 6,14388 gold badges4242 silver badges9595 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can achieve this with the :after state, background gradient and z-index.

.masked{
  background: white;
  z-index: 1;
  position:relative;
}

.masked:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  z-index: 2;
  background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: -moz-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
  background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
}

here is snippet full adapted to your needs: https://jsfiddle/9bp1rc0e/1/

Is this an example You're looking for? http://jsbin./guwititube/edit?html,css,js,output

If it is then you can make it readable by changing the height of the article:after with jquery onClick function attached to the "Read more" button. Potentially, changing the height of the article element itself if there's a lot of text.

This example is from this thread How to apply a CSS gradient over a text, from a transparent to an opaque colour