berel

by seevis

HTML

<table>
  <tr>
    <td>
      <div class="berel"> <img src="https://images2.imgbox.com/2d/03/kw5WAYlM_o.png" class="imgberel">
        <div class="oerel">
          <div class="imieberel"> Steven Sanders </div>
          <div class="txtberel"> Wilkołak z genem; gej. Ma 38 lat i interesuje się sportem. Pracuje na siłowni w Portland. </div>
        </div>
      </div>
    </td>
    <td>
      <div class="berel"> <img src="https://64.media.tumblr.com/9ff5b6ddfbce3475c4052a045aa38d6f/tumblr_oumvj1Qk3C1tih7oto4_250.jpg" class="imgberel">
        <div class="oerel">
          <div class="imieberel"> Greg Foster </div>
          <div class="txtberel"> wilkołak z genem, ma 37 lat; pochodzi z Manzanity (Oregon). Jest żonaty od pięciu lat z Vivianne, nauczycielką hiszpańskiego z Mishawaki. </div>
        </div>
      </div>
    </td>
     <td>
      <div class="berel"> <img src="https://64.media.tumblr.com/9ff5b6ddfbce3475c4052a045aa38d6f/tumblr_oumvj1Qk3C1tih7oto4_250.jpg" class="imgberel">
        <div class="oerel">
          <div class="imieberel"> Greg Foster </div>
          <div class="txtberel"> Wiedźmy swoją siłę czerpią z żył magii, które powszechnie znane są jako tak zwane żyły wodne. Są to miejsca, gdzie niektórzy nie potrafią się wyspać, a inni zmienni mogą wyczuć nieco odpychającą aurę. Magowie jednak w takich miejscach czują się jak ryba w wodzie. Przebywanie w okolicach żył wodnych wzmacnia magię i siły witalne, jednak ma to obustronne ograniczenia. Czarownice nie są w stanie skumulować całej energii, a żyły z upływem czasu potrafią się wyjałowić, co wyjaśniałoby kiedyś częste podróżowanie magów po świecie.aki. </div>
        </div>
      </div>
    </td>
  </tr>
</table>

CSS

/* rel - npc pseudo kp*/

 .berel {
   position: relative;
   width: 150px;
   border: 4px solid #1c2021;
 }

 .imgberel {
   display: block;
   width: 150px;
   height: auto;
 }

 .oerel {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   overflow-y: auto;
   background-color: #1c2021;
   transition: 0.5s ease;
 }

 .berel:hover .oerel {
   opacity: 0.9;
 }

 .txtberel {
   position: absolute;
   color: white;
   font-size: 8pt;
   text-align: justify;
   padding: 5px;
   font-family: 'Verdana', serif;
   overflow-y: auto;
   scrollbar-color: #909ab1 #3f4554;
   scrollbar-width: thin;
 }

 .imieberel {
   letter-spacing: 1px;
   font-size: 11pt;
   color: #989b9c;
   font-family: 'Asar', serif;
   padding: 2px;
   text-align: center;
 }