Как сделать полупрозрачный аккардеон

Question

Нужно сделать полупрозрачный аккордеон. Пытался нагуглить на разных сайтах и чекнуть гугл, результата - 0. Надеюсь здесь помогут.

Answer 1

Если фон одного цвета, то просто используйте градиент под цвет фона

.hidden {
  display: block;
  max-height: 5.75em;
  overflow: hidden;
  position: relative;
}

.hidden::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#show {display: none;}
#show:checked ~ .hidden {max-height: inherit;}
#show:checked ~ .hidden::after,
#show:checked ~ label[for="show"] {display: none;}

<input id="show" type="checkbox">
<div class="hidden">В этот лес завороженный,<br>
По пушинкам серебра,<br>
Я с винтовкой заряженной<br>
На охоту шел вчера.<br>
По дорожке чистой, гладкой<br>
Я прошел, не наследил…<br>
Кто ж катался здесь украдкой?<br>
Кто здесь падал и ходил?<br>
Подойду, взгляну поближе:<br>
Хрупкий снег изломан весь.<br>
Здесь вот когти, дальше — лыжи…<br>
Кто-то странный бегал здесь.<br>
Кабы твердо знал я тайну<br>
Заколдованным речам,<br>
Я узнал бы хоть случайно,<br>
Кто здесь бродит по ночам.<br>
Из-за елки бы высокой<br>
Подсмотрел я на кругу:<br>
Кто глубокий след далекий<br>
Оставляет на снегу?.</div>
<label for="show">Показать ещё</label>

Иначе используем, допустим image-mask

body {
  min-height: 100vh;
  margin: 0;
  background: url('//i.imgur.com/zPGG8Hd.png') no-repeat center center / cover;
  padding: 10px;
  box-sizing: border-box;
}

.hidden {
  display: block;
  max-height: 5.75em;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to top, transparent, #000);
  mask-image: linear-gradient(to top, transparent, #000);
}

#show {display: none;}
#show:checked ~ .hidden {
  max-height: inherit;
  -webkit-mask-image: none;
  mask-image: none;
}
#show:checked ~ label[for="show"] {display: none;}

<input id="show" type="checkbox">
<div class="hidden">В этот лес завороженный,<br>
По пушинкам серебра,<br>
Я с винтовкой заряженной<br>
На охоту шел вчера.<br>
По дорожке чистой, гладкой<br>
Я прошел, не наследил…<br>
Кто ж катался здесь украдкой?<br>
Кто здесь падал и ходил?<br>
Подойду, взгляну поближе:<br>
Хрупкий снег изломан весь.<br>
Здесь вот когти, дальше — лыжи…<br>
Кто-то странный бегал здесь.<br>
Кабы твердо знал я тайну<br>
Заколдованным речам,<br>
Я узнал бы хоть случайно,<br>
Кто здесь бродит по ночам.<br>
Из-за елки бы высокой<br>
Подсмотрел я на кругу:<br>
Кто глубокий след далекий<br>
Оставляет на снегу?.</div>
<label for="show">Показать ещё</label>

БЛОГ НА HUSL

Как сделать полупрозрачный аккардеон

Ответы (1 шт):