title: slidetoggle in pure Javascript
body: <p>As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that. </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>function show(myText) {
    var elements = document.getElementsByClassName(myText)
    
    for(var i = 0; i &lt; elements.length; i++){
        elements[i].style.visibility = "visible";
    }
  } 
  
  function hide(myText) {
    var elements = document.getElementsByClassName(myText)
    
    for(var i = 0; i &lt; elements.length; i++){
        elements[i].style.visibility = "hidden";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text1 {
   position: relative;
   bottom: 28px;
   text-align: center;
   background-color: grey;
   width: 100%;
   height: 10%;
   font-size: 20px;
   color: white;
   opacity: 0.7;
   display: block;
   visibility: hidden;
  }
  
  .text2 {
   position: relative;
   bottom: 28px;
   text-align: center;
   background-color: grey;
   width: 100%;
   height: 10%;
   font-size: 20px;
   color: white;
   opacity: 0.7;
   display: block;
   visibility: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6 col-sm-12"&gt;
      &lt;div class="tumb-wrapper"&gt;
        &lt;a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')"&gt;
        &lt;img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/&gt;
         &lt;div class="text1"&gt;AAA&lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 col-sm-12"&gt;
      &lt;div class="tumb-wrapper"&gt;
        &lt;a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')"&gt;
        &lt;img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/&gt;
        &lt;div class="text2"&gt;BBB&lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>