/* Настройка всплывающих подсказок при наведении*/
.tooltip {
  border: none;
  text-decoration: none;
  position: relative;}
.tooltip span {
  margin-left: -999em;
  position: absolute;}

.tooltip:hover span {
  position: absolute;
  left: 0px;
  top: 10px;
  z-index: 99;
  margin-left: 0;
}

.top {
    background-color: #fbf2dc;
    border-left: 5px solid #8f806c;
    border-bottom: 3px solid #8f806c;
    color: #9f8464;
    font-size: 12px;
    height: auto !important;
    padding: 1px;
    position: absolute;
    text-align: center;
    width: 200px !important;
    z-index: 200;
}
/* оформление описания подфорумов*/
.tclcon {background-color: rgba(153, 199, 234, 0.36);border-radius: 5px;width: 480px;padding-left: 10px;line-height: 12px;padding-right: 5px;padding-top: 5px;min-height: 44px;text-align: justify;}

.pa-replies {margin-top:5px!important}

/* выделенный текст */
::selection {
    background: #277382;
    color: #c4d6da;
}
/* зачеркнутый текст */
del:hover {
    background: transparent;
    text-decoration: none!important;
}

бывшее

   /* дополнение*/
   .punbb td div.tclcon {
  margin-left: 5px;
 padding-left: 4px; 
}

#pun-index td div.tclcon {
   color: #071c05;
    margin-left: 10px;
    margin-top: 4px;
    font-family: Verdana !important;
    width: 380px;
   height: 140px;
    font-size: 12px;
    padding: 2px 15px 20px 10px;
    text-align: justify;
    line-height: 100%;
    background: url(https://upforme.ru/uploads/001a/d9/23/2/317134.png) top no-repeat, url() bottom no-repeat, url(https://upforme.ru/uploads/001a/d9/23/2/98163.png) no-repeat;
    border-radius: 13px;

}

.punbb .main .tcr a {
  font-size: 13px !important;
  font-weight: normal;
      }

.subforums {
  margin-left: 16px;
  margin-top: 0.9em;
  margin-bottom: 0.2em;
}

.subforums span {
  display: block;
  margin-top: 1px;
  margin-left: 0;
}

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
}

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn:hover {
  background-position: right center; /* change the direction of the change here */
}

.btn-1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-2 {
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-3 {
  background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}

.btn-4 {
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
}

.btn-5 {
  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
}

/* Magic Stuff End -> */

[html]
<style>
html {
  min-height: 100%;
}

body {
  background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}

h1 {
  color: white;
  padding-left: 10px;
}

#hover {
  color: rgba(188, 175, 204, 0.9);
}

h2#testimonials {
  color: #fffae3;
}

div#all {
  width: 100%;
  height: 100%;
}

/* generic css */

.view {
  margin: 10px;
  float: left;
  border: 10px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #fff url(../images/bgimg.jpg) no-repeat center center
}

.view .mask,
.view .content {
  width: 300px;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}

.view img {
  display: block;
  position: relative
}

.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  font-family: Raleway, serif;
  padding: 10px;
  /*background: rgba(0, 0, 0, 0.8);*/
  margin: 20px 0 0 0
}

.view p {
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 14px;
  position: relative;
  color: #fff;
  padding: 0px 20px 0px;
  text-align: center
}

.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  font-family: Raleway, serif;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000
}

.view a.info:hover {
  box-shadow: 0 0 5px #000
}

/*1*/

.view-first img {
  /*1*/
  transition: all 0.2s linear;
  width: 300px;
  height: 200px;
}

.view-first .mask {
  opacity: 0;
  background-color: rgba(58, 1, 132, 0.44);
  transition: all 0.4s ease-in-out;
}

.view-first h2 {
  transform: translateY(-100px);
  opacity: 0;
  font-family: Raleway, serif;
  transition: all 0.2s ease-in-out;
}

.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

.view-first a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

/* */

.view-first:hover img {
  transform: scale(1.1);
}

.view-first:hover .mask {
  opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-first:hover p {
  transition-delay: 0.1s;
}

.view-first:hover a.info {
  transition-delay: 0.2s;
}

/*2*/

.view-second img {
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
}

.view-second .mask {
  background-color: rgba(12, 19, 27, 0.6);
  width: 300px;
  padding: 105px;
  height: 200px;
  opacity: 0;
  transform: translate(265px, 145px) rotate(45deg);
  -webkit-transform: translate(265px, 145px) rotate(45deg);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.view-second h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  font-family: Raleway, serif;
  background: transparent;
  margin: 20px 40px 0px 40px;
  -webkit-transform: translate(200px, -200px);
  transform: translate(200px, -200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.view-second p {
  transform: translate(-200px, 200px);
  -webkit-transform: translate(200px, -200px);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.view-second a.info {
  transform: translate(0px, 100px);
  -webkit-transform: translate(0px, 100px);
  transition: all 0.2s 0.1s ease-in-out;
  -webkit-transition: all 0.2s 0.1s ease-in-out;
}

/* */

.view-second:hover .mask {
  opacity: 1;
  transform: translate(-80px, -125px) rotate(45deg);
  -webkit-transform: translate(-80px, -125px) rotate(45deg);
}

.view-second:hover h2 {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}

.view-second:hover p {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}

.view-second:hover a.info {
  transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}

/*3*/

.view-tenth img {
  transform: scaleY(1);
  transition: all .7s ease-in-out;
}

.view-tenth .mask {
  background-color: rgba(255, 231, 179, 0.3);
  transition: all 0.5s linear;
  opacity: 0;
}

.view-tenth h2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  margin: 20px 40px 0px 40px;
  transform: scale(0);
  color: #333;
  transition: all 0.5s linear;
  opacity: 0;
}

.view-tenth p {
  color: #333;
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
  padding-
}

.view-tenth a.info {
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
}

.view-tenth:hover img {
  -webkit-transform: scale(10);
  transform: scale(10);
  opacity: 0;
}

.view-tenth:hover .mask {
  opacity: 1;
}

.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info {
  transform: scale(1);
  opacity: 1;
}
</style>

<link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'>

<h1 style="font-family: 'Raleway', sans-serif;"> CSS3 hover<span id="hover"> effects/</span></h1>
<p style="font-family: sans-serif; color: #fff; padding-left: 10px;">An implementation of Alessio Atzeni's CSS3 effects. Please give credit to <a href="www.jacobstone.co.uk" style="color:#efefef; text-decoration: none;">www.jacobstone.co.uk</a> if you use my photography.</p>
<div id="all">
  <div class="view view-first">
    <img src="https://static1.squarespace.com/static/5aea79c52487fde9b8efd0b1/t/5bb6b38ce5e5f09147c1b8ab/1538700172787/empire-state.png" />
    <div class="mask">
      <h2>Empire State</h2>
      <p>A cool description of some sort between these tags. I am so cool and awesomely awesome.</p>
      <a href="#" class="info">Read More</a>
    </div>
  </div>

  <div class="view view-second">
    <img src="https://static1.squarespace.com/static/5aea79c52487fde9b8efd0b1/t/5bb6b38e4785d3a94fdb56b0/1538700175156/midtown.png" />
    <div class="mask"></div>
    <div class="content">
      <h2>Midtown</h2>
      <p>A description of some sort between these tags. I am so cool and awesomely awesome.</p>
      <a href="#" class="info">Read More</a>
    </div>
  </div>

  <div class="view view-tenth">
    <img src="https://static1.squarespace.com/static/5aea79c52487fde9b8efd0b1/t/5bb6b388e5e5f09147c1b870/1538700168395/liberty.png" />
    <div class="mask">
      <h2>The Only Living Boy in New York</h2>
      <p>Words and such, a whole lot more of muh flippin' words.</p>
      <a href="#" class="info">Read More</a>
    </div>
  </div>

  <div class="view view-second">
    <img src="https://static1.squarespace.com/static/5aea79c52487fde9b8efd0b1/t/5bb6b392e5e5f09147c1b901/1538700178288/skyscrapers.png" />
    <div class="mask"></div>
    <div class="content">
      <h2 id="testimonials">Skyscrapers</h2>
      <p>&ldquo;A description of some sort between these tags. I am so cool. Didn't you hear? &rdquo;</p>
      <a href="#" class="info">Read More</a>
    </div>
  </div>

</div>

[/html]

[html]
<style>
textarea {
  font-size: 24px;
  border:10px solid black;
  padding: 2rem 1rem;
  min-height: 3em;
  resize: both;
  background: #ffd73e33;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}
</style>
<script>
</script>

<textarea resize>Resize me for some magic! 🎇</textarea>

[/html]