[html]
<style>
.korpus > div,
.korpus > input {
    display: none;
}

.korpus label {
  width: 151px;
  background: url(https://forumstatic.ru/files/001b/4d/c0/83575.jpg?v=1) no-repeat fixed top center;
  background-size: cover;
  color: #8b7e66;
  text-shadow: 1px 1px 1px #523d25;
  font: normal 14px Merriweather;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  padding: 3px;
  transition: all .5s ease-in-out 0s;
  margin: 3px
}

.korpus input[type="radio"]:checked + label {
  background: #84735a;
  color: #c6c4b7;  /* выбранный элемент */
  font-weight: normal; 
  box-shadow: 0 4px 10px ;
}

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.korpus > input:nth-of-type(4):checked ~ div:nth-of-type(4){
  display: block;
  padding-top: 2px;
  text-align: justify;}

.text {
  height: 500px; /* высота нашего блока */
  overflow-y: scroll; /* прокрутка по вертикали */
  padding: 4px 5px 4px 5px;
  margin: 5px 4px 0 0px !important;
  background: rgba(0, 0, 0, 0.1)
}

</style>

<!--Всплывающие Подсказки при наведении-->
<style>
#tooltip {
  position: absolute;
  background: rgba(0,0,0,.85);
  z-index: 999;
  max-width: 80px;
  border: none;
  border-radius: 2px;
  box-shadow: 0 0 0px 1px rgba(0,0,0,.05) inset;
  font-family: roboto;
  font-size: 11px; /* размер текста */
  display: none;
  color: #d9d8d1; /* цвет текста */
  text-align: center;
  padding: 5px;
  letter-spacing: 1px;
  font-weight: 500;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/001a/fa/d0/26671.js"></script>
<!--//End//-Всплывающие Подсказки при наведении-->

<div>
<table width="650px">
<tbody>
<tr>
<td>
<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1" />
<label for="vkl1">Сюжетные</label>
<input type="radio" name="odin" id="vkl2" />
<label for="vkl2">Игровые</label>
<input type="radio" name="odin" id="vkl3" />
<label for="vkl3">Флешмобы</label>
<input type="radio" name="odin" id="vkl4" />
<label for="vkl4">Приёмка</label>

<div class="text">
<div>

<table width="650px">
<tbody>
<tr>
<td align="center">
<p>Разгаданные тайны и покорённые квесты</p>

<img  title="Welcome to Haven" src="https://forumupload.ru/uploads/001b/0d/bc/5/79730.gif" />
</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p>Челленджи, игры и прочий движ</p>

</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p>Увеселительные переодевания</p>

</td>
<tr>
</tbody>
</table>
</div>
</div>

<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p align="center">
<img src="https://forumupload.ru/uploads/001b/0d/bc/9/840533.gif" /> <img src="https://forumupload.ru/uploads/001b/0d/bc/9/270323.gif" /> <img src="https://forumupload.ru/uploads/001b/0d/bc/9/313932.gif" /></p>
<p align="center"><font size="30px">⋯</font></p>
<p align="center">Eleonore, WELCOME BACK HOME</p>
<p align="center"><font size="30px"><br>⋮</font></p>
<p align="center">Ночью, на безлюдной улице, за своей спиной ты услышишь шаги. Среди деревьев ветер плачет и мечется, а под твоими ногами будут белеть кости. У шумного моря, в высоких волнах ты заметишь лицо, и оно откроет глаза — и посмотрит в ответ. Что-то странное происходит здесь. Возьми меня за руку.</p>
<p align="center">Найти соигрока и обзавестись знакомствами можно <a href="https://nevah.ru/viewtopic.php?id=19#p28">здесь</a>, добавить твинка — <a href="https://nevah.rusff.me/viewtopic.php?id=21">вот здесь</a>.
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
[/html]