МЭР
[html]<style>
.effects {
position: relative;
display: inline-block;
background-color: #fff;
font: normal 13px sans-serif;
text-color: #c0c0c0;
overflow: hidden;
margin-left: 120px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
max-height: 300;
}
.effects img {
display: block;
position: relative;
max-width:100%;
height:auto;
margin-left: auto;
margin-right: auto;
}
.effects div {
width: calc(100% - 20px);
height: 100%;
position: absolute;
overflow: auto;
top: 0;
left: 0;
padding: 10px;
text-align: center;
opacity:0;
}
.effects h2 {
display: inline-block;
letter-spacing: 3px;
text-shadow: 1px 1px 4px #449486;
color: white;
text-decoration: none;
text-align: center;
color: #e1e1e1;
font-family: 'Verdana', sans-serif;
font-size: 20px;
}
.effects p {
display: inline-block;
letter-spacing: 3px;
text-shadow: 1px 1px 4px #449486;
color: white;
text-decoration: none;
text-align: center;
color: #e1e1e1;
font-family: 'Verdana', sans-serif;
font-size: 15px;
}
.effects t {
display: inline-block;
text-decoration: none;
padding: 10px 15px 20px;
text-align: justify;
background: rgba(21, 21, 21, 0.4);
color: #e1e1e1;
font-family: 'Verdana', sans-serif;
font-size: 13px;
}
.effects div {
opacity: 0;
background: url(https://i.imgur.com/QeYl4hs.png);
transition: all 0.4s ease-in-out;
color: #000;
overflow:auto;
}
.effects img {
transition: all 0.5s linear;
}
.effects:hover img {
transform: scaleY(1);
transition: all .7s ease-in-out;
opacity: 20;
}
.effects:hover div {
opacity: 1;
}
</style>
<div class="effects">
<img src="https://i.imgur.com/V1IqNWP.png">
<div>
<h2>РОДЖЕР ТЕЙЛОР</h2>
<br><p>мэр</p>
<t>Каждому городу нужен свой герой. И Роджеру даже не нужна маска, чтобы творить великие дела. Его обожают старики и дети, он обладатель голливудской улыбки и безупречной репутации. Спортсмен и маркетолог по образованию. Вступил на свой пост три года назад и с тех пор стремительно превращает Ситку из рыболовецкого города в центр экотуризма.
<br>Еще в школе познакомился со своей женой, Элизабет, успешной писательницей детских книжек и эко-защитницей. Ведут совместный инстаграм-аккаунт и канал на ютубе. Трое детей. Старший сын учится в Массачусетском технологическом институте, а девочки ходят в местную школу и так же ведут активную социальную деятельность.
<br>Роджер родился в Ситке, но уехал покорять «юг» сразу после школы и вернулся только шесть лет назад. Как говорят местные жители – совсем другим человеком. Тесно общающиеся с ним по работе люди предпочитают отзываться сдержанно. Анонимные источники и вовсе заявляют, что мэр является чьим-то бизнес-проектом.</t>
</div>
</div>
<br>
<div class="effects">
<img src="https://i.imgur.com/YtFrM23.png">
<div>
<h2>МОРГАН УЭЛШ</h2>
<br><p>пастор</p>
<t>Только у одного человека более прозрачная репутация – отца Моргана. Обладатель невероятной харизмы и магнетизма. Его хочется слушать, ему хочется доверять и исповедаться, даже если вы никогда прежде этого не делали. В его церкви всегда аншлаг, а после службы люди стоят в очереди лишь бы обменяться несколькими словами. Для своего преклонного возраста ведет активный образ жизни, каждое утро отца Моргана можно встретить на пробежке, а вечером в своем саду, ухаживающим за растениями или читающим книжку на крыльце дома. Семьи никогда не имел, живет один.
<br>Помимо основной деятельности содержит приют для бездомных животных на собственные деньги. Если вам нужна любая помощь, в том числе дополнительная терапия в виде домашнего питомца – смело обращайтесь к отцу Моргану. Дверь его дома всегда для вас открыта.</t>
</div>
</div></align>
<br>
<div class="effects">
<img src="https://i.imgur.com/qZIRD6w.png">
<div>
<h2>Энтони МакАлистер</h2>
<br><p>шериф</p>
<t>У шерифа МакАлистера скверный характер. Он всегда ворчлив, всегда мрачен и всегда держится в стороне от шумных скоплений людей, предпочитая общению - одиночество и пару стаканов крепкого виски перед сном. Не женат, детей нет. Тем не менее, даже при таком впечатляющем наборе отталкивающих черт является превосходным шерифом и просто отменным детективом. В участке его уважают, а люди с радостью вверяют в его руки безопасность города, хоть и тоже, как и он, стараются делать это через посредников, лишний раз не вступая с ним в личный контакт.
<br>Насколько дерьмовый из Энтони собеседник, настолько же прекрасный у него вкус к музыке. Его хобби - распевать олдскульные песни, когда никто не видит, и врубать ее погромче - в своем кабинете, чтобы настроиться на нужный лад в работе. И, поговаривают, он страстный фанат бейсбола.</t>
</div>
</div></align>
<br>
<div class="effects">
<img src="https://i.imgur.com/YqPo09X.png">
<div>
<h2>Йэлнаву</h2>
<br><p>шаман</p>
<t>Шаман был всегда. Как море, солнце, небо и звезды. И всегда будет. Источник многовековой мудрости, мост между мирами, проводник в мир духов и мертвых. Никто не знает, сколько ему лет. Все, считавшие его своим ровесником, уже умерли.
<br>Его справедливость, как и жестокость, не поддаются сомнению. Именно к нему обращаются за помощью в случае проблем со здоровьем или необходимостью защиты. Чтит старые традиции и не признает прогресса, из-за чего постоянно конфликтует с новым вождем тлинкитов, считая его худшим правителем на своем веку. Предпочитает общество духов людям и ведет замкнутый образ жизни. Свободно общается с любыми животными и может ими управлять. Или тщательно создает видимость своего преимущества.
<br>Практически никогда не покидает пределы резервации и защищает ее границы от посягательств белых людей. Тлинкиты никогда не видят его по ночам, ведь у Йэлнаву даже нет своего дома. Считается, что он превращается в ворона и летит к звездам, чтобы почерпнуть в верхнем мире еще больше мудрости.</t>
</div>
</div></align>[/html]
