[html]
<style type="text/css">
body {
  background: #333;
}

.box {
  position: relative;
  overflow: hidden;
  height: 376px;
  width: 710px;
  background: url('https://forumupload.ru/uploads/0018/28/7e/858/459565.gif') center left no-repeat;
  background-size: cover;
  cursor: pointer;
}

.hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 8, 14, 0.8);
  transition: all 0.3s ease-in-out;
  opacity: 0;
}
.box:hover .hover-effect {
  opacity: 1;
}

.box:hover .hover-text {
  right: 0;
}

.hover-text {
  position: absolute;
  right: -100%;
  bottom: 0;
  display: block;
  max-width: 100%;
  padding: 0px 12px;
  text-decoration: none;
  font-family: "Proxima Nova";
  text-align: right;
  transition: all 0.5s ease-in-out;
}

h1 {
width: 100%;
  font-size: 22px;
  letter-spacing: 5px;
  padding: 0.8em 0;
color: #fff;
font-weight: 400;
}

p {
    width: 100%;
    line-height: 1em;
    font-size: 12px;
    display: inline-block;
color: #fff;
font-weight: 400;
    text-align: right;
}
</style>
<center><div class="box">
  <div class="hover-effect">
    <a href="#" class="hover-text">
       <center><h1 style='font-size: 48px'>Episodes</h1></center>
      <h1 style='font-size: 22px'>That was a long time ago... My friend...</h1>
      <p>
    </a>
  </div>
</div></center>
[/html]

[html]
<style type="text/css">
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
width:300px;
-webkit-filter: grayscale(100%);
}
.bw:hover {
-webkit-filter: grayscale(0%);
transition: 0.6s;
transform: scale(2);
}

</style>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="https://ainhoa.anihub.me/viewtopic.php?id=2529"><img class="bw" src='https://forumupload.ru/uploads/0018/28/7e/857/174625.png' /></a>
<br>
<br>
<br>
<br>
<br>
<br>
</center>[/html]

Отредактировано Lydia Richter (2023-03-01 09:51:55)