[html]
<div class="back"> <div class="ava"><img src="https://placehold.it/60"></div><div class="ava2"><img src="https://placehold.it/60"></div><div class="zagol">ПРАВИЛА ТВОЕЙ ЖИЗНИ</div>

<div id="container"> 
<div class="mtabs"> 
<input id="tab1" type="radio" name="ptabs" checked>  <label class="btn1" for="tab1"></label> 
<input id="tab2" type="radio" name="ptabs">  <label class="btn2" for="tab2"></label> 
<input id="tab3" type="radio" name="ptabs">  <label class="btn3" for="tab3"></label>

<section id="content1"> 

<div style="top: 46px;text-align: right;margin-left: 0px;position:absolute;z-index:100;/* border: red 1px solid; */">
<div class="strtext ">
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.
</div>
</div>       
</section> 

<section id="content2"> 
<div style="top: 46px;text-align: right;margin-left: 0px;position:absolute;z-index:100;/* border: red 1px solid; */">
<div class="strtext ">
<div class="photo" data-title="You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man." ><img src="https://placehold.it/60" alt="" hspace="10px" vspace="10px"></div>

<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><img src="https://placehold.it/60"  alt="" hspace="10px" vspace="10px"></div>
<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><img src="https://placehold.it/60"  alt="" hspace="10px" vspace="10px"></div>
</div></div>
</section>   
<section id="content3">
<div style="top: 46px;text-align: right;margin-left: 0px;position:absolute;z-index:100;/* border: red 1px solid; */">
<div class="strtext ">
<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><div class="kall"><img src="https://placehold.it/60" alt="" ></div> </div>
<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><div class="kall"><img src="https://placehold.it/60" alt=""></div> </div>
<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><div class="kall"><img src="https://placehold.it/60" alt=""></div> </div>
<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><div class="kall"><img src="https://placehold.it/60" alt=""></div> </div>
<div class="photo" data-title="тут ссылка на анкету и название фандома, а картинка внешка перса"><div class="kall"><img src="https://placehold.it/60" alt=""></div> </div>
</div>
</div>
</section>   
</div>
</div>
 

<style>
.back{
width: 500px;
height: 280px;
background: url(https://forumstatic.ru/files/001b/16/25/19551.jpg) top center fixed; 
position: relative;     
margin-left: 9%;   
margin-top: 10px;
}
.ava{       
width: 100px;   
  height: 50px;   
/* background: #aa758b; */   
position: absolute;   
top: 30px;
left: 15px;
}
.ava2{       
width: 100px;   
height: 50px;   
position: absolute;   
top: 130px;
left: 15px;
}
.ava2 img{     
height: 65px;     
position: absolute;     
left: 15px;     
top: -12px;     
border: 3px solid #a4fcff;   
border-radius: 70%;
}

.kall{       
width: 60px;   
  height: 50px;   

}

.kall img{     
height: 45px;     
/*position: absolute;    */
 
border: 3px solid #a4fcff;   
border-radius: 70%; }

.zagol{         
position: absolute;     
top: 31px;   
font-family: Mr Bedfort;     
left: 175px;
/*background: #a7aeb0;     */
font-size: 22px;   
color: #a4fcff;     
/*text-shadow: 5px 4px 1px #d3ccc6; */
}
.text{         
position: absolute;     
top: 123px;   
width: 120px;   
  height: 70px;   
font-family: Mr Bedfort;     
left: 67px;         
font-size: 11px;   
color: #3c3c3c;
/*border: 1px dashed black;*/
overflow: auto;
padding: 5px;
}
  .ava img{     
height: 65px;     
position: absolute;     
left: 15px;     
top: -12px;     
border: 3px solid #a4fcff;   
border-radius: 70%; }

.mtabs { 
position: relative;
border-radius: 50%;
} 
section {     
display: none;   
height: 280px;     
width: 360px;     
padding: 5px;     
font-family: century gothic;     
position: absolute;     
text-align: justify;     
top: 35px;     
left: 130px;     
font-size: 11px;     
overflow: auto;

} 
input {   
display: none;
} 
label {     
display: inline-block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  margin: 0 3px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  border-radius: 50%;
  border: 1px solid #2f363c;
  background-color: #eae6e8;
} 
input:checked + label { background: #a4fcff;
border-radius: 50%; } 
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3 { display: block; } 
.btn1{     
position: absolute;     
top: 260px;
left:40px;}
.btn2{     
position: absolute;     
top: 260px;
left:60px;}
.btn3{     
position: absolute;     
top: 260px;
left:80px; }
section {  animation: scale 0.7s ease-in-out; } 
@keyframes scale {    0% {    transform: scale(0.1);    opacity: 0;    }    50% {    transform: scale(1.005);    opacity: 0.5;    }    100% {    transform: scale(1);    opacity: 1;    }  } </style> [/html]