НАВЕДИ НА КАРТИНКУ!

[html]<style>
.tucha {
  width: 600px;
  height: 550px;
  display: block;
}

.tuchacontent {
  position: relative;
  width: 600px;
  max-width: 600px;
  height: 550px;
  max-height: 550px;
  margin: auto;
}

.tuchacontent .tucha-overlay {
  background: rgba(0, 0, 0, 0.75);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.tuchacontent:hover .tucha-overlay {
  opacity: 1;
}

.tucha-image {
  width: 100%;
}

.tucha-text {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 10%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.tuchacontent:hover .tucha-text {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.tucha-text tucha-title {
  color: #c5c4c2;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 50px;
  font-family: Cormorant Unicase;
}

.tucha-text {
  color: #c5c4c2;
}

.tucha-text a {
  color: #c0ab7f!important;
}

.tucha-text hr {
  margin: 5px auto 10px auto;
  width: 50%;
  opacity: 0.5;
}

.tucha-text table {
  margin: auto;
  border-spacing: 50px 15px;
}

.fadeIn-top {
  top: 20%;
}
</style>

<center>
  <div class="tucha">
    <div class="tuchacontent">
      <div class="tucha-overlay"></div>
      <img class="tucha-image" src="https://forumupload.ru/uploads/001a/f4/24/246/58159.png">
      <div class="tucha-text fadeIn-top">
        <tucha-title>туча</tucha-title>
        <p>60 лун, воительница племени Ветра</p>
        <hr>
        <p>местонахождение: <a href="https://cwnazare.mybb.ru/viewtopic.php?id=7&p=5#p3568">главная поляна</a></p>
        <p>эпизоды: tba</p>
        <hr>
        <p>
        <table>
          <tr>
            <td><b>Шелест Звёзд:</b> недоверие</td>
            <td><b>Зарница:</b> сдержанность</td>
          </tr>
          <tr>
            <td colspan=2><b>Цикута:</b> неприязнь</td>
          </tr>
          <tr>
            <td colspan=2><b>Змеистый:</b> враждебность</td>
          </tr>
        </table>
        </p>
      </div>
      </a>
    </div>
  </div>
</center>[/html]

Отредактировано Туча (2021-05-02 16:03:47)