slidetoggle in pure Javascript
<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>