42 lines
973 B
CSS
42 lines
973 B
CSS
@charset "UTF-8";
|
|
/* custom.css */
|
|
|
|
.module {
|
|
position: relative;
|
|
}
|
|
|
|
.module .collapse, .module .collapsing {
|
|
height: 4.5rem; /* By default 5 */
|
|
}
|
|
|
|
.module .collapse {
|
|
display: block; /* By default the bootstrap collapse has a display: none*/
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module .collapse.show {
|
|
height: auto;
|
|
}
|
|
|
|
.read-more {
|
|
position: absolute;
|
|
top: 1.6rem;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
|
|
/* 60% is where it should start the transition from transparent to white, increase it if you want to show more of your text*/
|
|
background-image: linear-gradient(to bottom, transparent 5%, white);
|
|
|
|
/* The opacity and transition is just to smooth out the effect */
|
|
opacity: 1;
|
|
transition: all .3s linear;
|
|
}
|
|
|
|
.read-more:not(.collapsed) {
|
|
opacity: 0;
|
|
/* you want to make the clickable area disapear once it is open, change the visibility to hidden:*/
|
|
/* visibility: hidden; */
|
|
}
|
|
|