隐藏可见毛玻璃交互

<div class="content masked"> 
    <p> sdfasdasdasdasdasdasd asdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdas </p> 
    <p> sdfasdasdasdasdasdasd asdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdas </p> 
    <p> sdfasdasdasdasdasdasd asdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdas </p> 
    <p> sdfasdasdasdasdasdasd asdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdas </p> 
</div>

$('.content').click(function() {
    $(this).toggleClass('masked open');
})

css:

.content {
    background: white;
    z-index: 1;
    position:relative;
    height:auto;
    overflow: hidden;
}
.content:before, .content:after{
    -webkit-transiton: all 300ms ease;
    -moz-transiton: all 300ms ease;
    transiton: all 300ms ease;
}
.content.masked{
    height: 100px；
}
.content.open{
    padding-bottom: 30px；
}
.content.masked:before {
    content: "Read More";
    position: absolute;
    bottom:10px;
    left:0;
    width:100%；
    z-index: 3;
    text-align: center;
}
.content.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%);
}
.content.open:before {
    content: "Read less";
    position: absolute;
    bottom:10px;
    left:0;
    width:100%;
    z-index: 3;
    text-align: center;
}
.content.open:after {
    content: none;
}

.content:before, .content:after{  -webkit-transiton: all 300ms ease;  -moz-transiton: all 300ms ease;  transiton: all 300ms ease;}.content.masked{  height: 100px;}.content.open{  padding-bottom: 30px;}.content.masked:before {  content: "Read More";  position: absolute;  bottom:10px;  left:0;  width:100%;  z-index: 3;  text-align: center;}.content.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%);}.content.open:before {  content: "Read less";  position: absolute;  bottom:10px;  left:0;  width:100%;  z-index: 3;  text-align: center;}.content.open:after {  content: none;}