title: View the top part of the text when applying css: "overflow: hidden;"
body: <p>I'm trying to create a timepicker, with the following elements:</p>
  
  <ul>
  <li>Up buttons for the hour and time;</li>
  <li>Two displays for next time, one for the next hour and the other for next minutes;</li>
  <li>Two displays for current time, one for the current hour and the other for current minutes;</li>
  <li>Two displays for the previous time, one for the previous hour and one for the previous minutes;</li>
  <li>Down buttons for the hour and time.</li>
  </ul>
  
  <p>I'm trying to create the idea of ​​movement when you press any of the buttons.</p>
  
  <p>This is the visual aspect I've achieved so far:</p>
  
  <p><a href="https://i.stack.imgur.com/KhbDS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KhbDS.jpg" alt="enter image description here"></a></p>
  
  <p>What I could not do:</p>
  
  <ul>
  <li>To present the upper part of the numbers, on the previous time displays.</li>
  </ul>
  
  <p>What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?</p>
  
  <p>To create the visual look of my timepicker, I used the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $("#th31").html("01");
  $("#tm31").html("01");
  $("#th3").html("00");
  $("#tm3").html("00");
  $("#th32").html("23");
  $("#tm32").html("59");
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal-pop-up-time{
    background-color: WhiteSmoke   ;
    cursor:pointer;
    display:block;
    width: 200px;
    height: 150px;
    position: absolute;
    left: 52%;
    z-index:10001;
  }
  .flex-container{
    position: relative;
    /* Other styling stuff */
    width: 50px;
    height: 25px;
    background-color: #3498db;
  }
  .flex-container1{
    position: relative;
     display: inline-block;
    /* Other styling stuff */
    width: 50px;
    height: 10px;
    background-color: red;
  }
  .spinner {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
  }
  .spinner-input-wrapper {
   display: flex;
  }
  .spinner-input {
   margin: 0 3px;
  }
  .inner-element{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 100%;
    transform: translate(-50%,-50%);
    /* or 3d alternative if you will add animations (smoother transitions) */
    transform: translate3d(-50%,-50%,0);
  }
  .triangle-up,
  .triangle-down {
   width: 0;
    height: 0;
    border: 4px solid transparent;
  }
  .triangle-up {
   border-bottom-width: 8px;
   border-bottom-color: #555;
  }
  .triangle-down {
    border-top-width: 8px;
    border-top-color: #555;
  }
  .div-overflow-hide{
    overflow: hidden;
  }
  .input-line-height{
    line-height: 10% !important;
  }
  .input-text-center{
    text-align: center !important;
  }
  .input-background-color{
    background-color:  DeepSkyBlue  ;
  }
  .input-background-color-white{
    background-color:  white  ;
  }
  .input-text-color{
    color: White; 
  }
  .div-center-element{
   margin:auto;
  }
  .div-ml-40{
    margin-left: 40% !important;
  }
  .div-mlr-5{
    margin-right: 5% !important;
    margin-left: 5% !important;
  }
  .div-ml-10{
    margin-left: 10% !important;
  }
  .div-ml-5{
    margin-left: 20% !important;
  }
  .div-tiangles-background-color{
     background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="lib/noty.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;div tabindex="-1" class = "modal-pop-up-time" id = "popupreg"&gt;
   &lt;div class="spinner-input-wrapper div-ml-10"&gt;
    &lt;div class="spinner div-mt-5"&gt;
     &lt;label class="div-ml-5"&gt;HH&lt;/label&gt;
     &lt;div class="div-tiangles-background-color" tabindex="2"&gt;
      &lt;div class="triangle-up div-ml-40" id="up4"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class= "flex-container1" tabindex="1"&gt;
      &lt;div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" &gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class= "flex-container " tabindex="2" &gt;
      &lt;div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" &gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class= "flex-container1" tabindex="1"&gt; 
      &lt;div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" &gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="div-tiangles-background-color"  tabindex="2"&gt;
      &lt;div class="triangle-down div-ml-40" id="down4"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class= "spinner div-mt-5"&gt;
     &lt;label class="div-mlr-5" &gt;:&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="spinner divmarginhor div-mt-5" &gt;
     &lt;label class="div-ml-5" &gt;MM&lt;/label&gt;
     &lt;div class="div-tiangles-background-color" tabindex="2"&gt;
      &lt;div class="triangle-up div-ml-40" id="up5"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class= "flex-container1" tabindex="1"&gt;
      &lt;div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" &gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class= "flex-container" tabindex="2"&gt;
      &lt;div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" &gt;&lt;/div&gt;
     &lt;/div &gt;
     &lt;div class= "flex-container1" tabindex="1"&gt;
      &lt;div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" &gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="div-tiangles-background-color" tabindex="2"&gt;
      &lt;div class="triangle-down div-ml-40" id="down5"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>