[html]
<style type="text/css">
#martyr {
width: 450px;
height: 450px;
margin: 25px auto 0px;
}
#martyr .saviour {
padding: 50px;
    background-color: #a63c3c;
height: 100px;
font-family: arial black;
color: #fff;
line-height: 90%;
text-align: right;
text-transform: uppercase;
letter-spacing: -1px;
}
#martyr .devil {
display: block;
height: 50px;
border: 1px solid #fff;
padding: 15px;
margin-top: 30px;
line-height: 120%;
}
#martyr .devil h1 {
font-size: 20px;
}
#martyr .devil h2 {
    font-size: 10px;
    letter-spacing: 0px;
    margin-top: 3px;
    text-transform: lowercase;
    font-family: monospace;
}
#martyr .never {
width: 450px;
height: 225px;
background-image:url(http://placehold.it/450x225)
}
#martyr input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
display: none;
}
#martyr label {
cursor: pointer;
}

#martyr .fool {
opacity: 0;
background: rgba(255,255,255,0.0);
  width: 350px;
padding: 50px;
  height: 155px;

  line-height: 100px;
  color: white;
  text-align: center;
transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;

}
#martyr input[type=checkbox]:checked ~ .fool {
  background: rgba(255,255,255,0.8);
opacity: 1;
}

#martyr .fool .text {
width: 348px;
     height: 154px;
padding-right: 2px;
overflow: auto;
text-align: justify;
color: #000;
font-family: arial;
font-size: 10px;
line-height: 110%;
}

#martyr .fool .text::-webkit-scrollbar { width: 8px; height: 5px; }
#martyr .fool .text::-webkit-scrollbar-track { background-color: #fff; border: 1px solid #90aaff; }
#martyr .fool .text::-webkit-scrollbar-thumb { background-color: #90aaff; }

.merc_cred { text-align: center; font-family: calibri; font-size: 7px; text-transform: uppercase; margin-top: -20px; margin-bottom: 25px; }
</style>
<div id="martyr">
<div class="saviour">
   <label for="toggle-1">
   <div class="devil">
   <h1>welcome to dead inside</h2>
   <h2>постапокалипсис, зомби, хоррор ✴ 21+ ✴ рисованные внешности</h2>
   </div>
   </label>
   </div>
<div class="never">
   <input type="checkbox" id="toggle-1">
   <div class="fool">
     <div class="text">Не знаю, каким ветром тебя сюда занесло - но сочувствую. Тут ты сможешь найти кое-какое убежище, весело умереть и обзавестись кучей новых друзей, которые возможно, съедят тебя, когда закончится еда. Погрузись в мир страха, напрасных надежд и борьбы за выживание. Вдруг хотя бы тебе повезет?
<br><u>Спойлер:</u> нет.
<br>В твоем распоряжении будут "акции", "хочу к вам" или же выбирай сам, как тебе отправится к праотцам и пиши свою собственную историю. Так даже интереснее, ведь так? Мы всегда поможем. Лишь протяни руку. Если же ты пришёл сюда лишь для того, чтобы высказать своё мнение - мы его внимательно выслушаем, а потом забудем.
<br>
<br><i>У меня есть ваше внимание, мальчик? Тогда вы увидите что-то прекрасное (с)</i>
     
     </div>
   </div>
</div>
</div>
[/html]

Придержанные внешности:
tokyo revengers - manjiro sano - martin sweeney