.persons {
  position: absolute;
  margin-left: 28px;
  top: 140px;
  width: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 204px;
    transition: all .3s cubic-bezier(.64,.51,.55,1.16) 0s;
}

.persons a {
  display: block;
  width: 72px;
  height: 57px;
  position: relative;
  opacity: .85;
    transition: all .5s cubic-bezier(.64,.51,.55,1.16) 0s !important;
}

.persons div {
  position: relative;
  width: 72px;
  height: 57px;
  background: #c6b697;
  border: 1px solid #83765f
}

.persons div:after {
  content: "";
  background: url(https://forumstatic.ru/files/001a/01/c0/38309.jpg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}

.persons div:before {
  content: "";
  background: rgba(195,180,148,.23);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
}

.persons img {
  mix-blend-mode: multiply
}

.persons span {
  position: absolute;
  font: 500 9px vollkorn;
  text-transform: uppercase;
  color: #dfd0b0;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  text-align: center;
  align-items: center;
    transition: all .5s cubic-bezier(.64,.51,.55,1) 0s;
}

.persons:hover {
  opacity: 1
}

.persons a:hover {
  opacity: 1
}

.persons a:hover span {
  opacity: 0
}

.persons a:hover img {
  mix-blend-mode: normal
}

<!--оформление всплывающей  подсказки-->
<style>
#tooltip {
position:absolute;
z-index: 999;
letter-spacing: 2px;
font-family: arial;
font-weight: 500;
font-size:11px;
padding: 6px!important;
border-radius: 0px!important;
background-image: url(https://forumstatic.ru/files/001b/75/7b/60225.png);
border: solid 1px #8D7C66!important;
box-shadow: inset 0 0 0 1px #22211E!important;
color: #A89A88; 
text-shadow: 1px 1px 1px #22211E;
display:none;
text-align:center;
padding:4px;
}
</style>

<style>
abbr {text-decoration: underline dotted;}
</style>










<div class="epizod">
<div><img src=""></div>
<span>эпизод недели<br>
<a href="">С ОБРАТНОЙ СТОРОНЫ ЗЕРКАЛЬНОГО СТЕКЛА</a></span>
</div>



<div class="fandom">
<div><img src=""></div>
<span>фандом недели<br>
<a href="">j.k.rowling wizarding world</a></span>
</div>




<div class="pisatel">
<a href="" title="постописец имя"><div><img src=""></div></a> <a href="" title="постописец имя"><div><img src=""></div></a> <a href="" title="постописец имя"><div><img src=""></div></a>
</div>


<div class="activ">
<a href="ссылка" title="активист имя"><div><img src=""></div></a> <a href="ссылка"  title="активист имя"><div><img src=""></div></a> <a href="ссылка" title="активист имя"><div><img src=""></div></a>
</div>


<div id="nuzhn"><a href="ссылка" class="nname">НУЖНЫЕ</a>  <a href="ссылка" title="ты очень нужен имя" class="name">name — </a> <a href="ссылка" title="ты очень нужен имя"class="name"> name —</a> <a href="ссылка" title="ты очень нужен имя"class="name">name</a></div>

<div id="nuzhn2"><a href="ссылка" title="ты очень нужен имя" class="name">name — </a> <a href="ссылка" title="ты очень нужен имя"class="name"> name —</a> <a href="ссылка" title="ты очень нужен имя"class="name">name</a></div>

/* категории */
#pun-category1.category h2, #pun-category2.category h2, #pun-category3.category h2, #pun-category4.category h2, #pun-category5.category h2, #pun-category6.category h2 {
margin: 10px -26px!important;   background-position: center; width: 955px; background-image: url(https://forumstatic.ru/files/001b/75/7b/60225.png); border-top: 1px solid #8D7C66!important; border-bottom: 1px solid #8D7C66!important; font-size: 5px!important; } 

#pun-stats h2, #post-form.formal h2 { margin: 10px -26px!important;  background-position: center; width: 955px; background-image: url(https://forumstatic.ru/files/001b/75/7b/60225.png); border-top: 1px solid #8D7C66!important;border-bottom: 1px solid #8D7C66!important; font-size: 5px!important; }

/*текст категорий */
#pun-index div.category h2, #pun-index #pun-stats h2 { text-align: center; text-transform: uppercase;
font-weight: 700; letter-spacing: 1px!important; font-size: 0px!important; font-family: 'Yeseva One';   padding: 0px 0px 0px 0px; color: #;  text-shadow: 1px 1px 1px #;
}

#post-form.formal h2 {display: none;}

.post h3 {
    background: linear-gradient(to right, rgba(135,117,81,.05) 0%,rgba(135,117,81,0) 50%,rgba(135,117,81,.05) 100%);
    border: 1px solid !important;
    border-image: linear-gradient(to right, rgba(107,95,77,.23) 0%,rgba(107,95,77,0) 50%,rgba(107,95,77,.23) 100%) 1 !important;
    font-family: lora !important;
    font-size: 10px !important;
    height: 25px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0px;
    margin-top: 18px;
    padding-top: 0px;
    width: 100%;
    text-transform: lowercase;
    font-weight: 600 !important;
    font-style: italic !important;
}
.post h3 span {
    margin-left: 0px !important;;
    padding-top: 6px !important;;
    text-align: left;
    width: auto;
    font-weight: 600 !important;
}


#pun .post h3 strong {
    font-weight: normal;
    margin-left: 725px;
    position: absolute;
    width: 200px;
    text-align: right !important;
}