diff --git a/css/collapsemod.css b/css/collapsemod.css new file mode 100644 index 0000000..eb8a908 --- /dev/null +++ b/css/collapsemod.css @@ -0,0 +1,42 @@ + @charset "UTF-8"; +/* custom.css */ + + .module { + position: relative; + } + + .module .collapse, .module .collapsing { + height: 5rem; + } + + .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: 0; + 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 60%, 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; */ + } + \ No newline at end of file diff --git a/index_4.4.html b/index_4.4.html index 3ac6ba6..a69b333 100644 --- a/index_4.4.html +++ b/index_4.4.html @@ -47,7 +47,7 @@
+ + + + + + + + + + + + + + + + + + + + + + + +