slidetoggle in pure Javascript

Question

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.

function show(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "visible";
  }
} 

function hide(myText) {
  var elements = document.getElementsByClassName(myText)
  
  for(var i = 0; i < elements.length; i++){
      elements[i].style.visibility = "hidden";
  }
}

.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;
}

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
      <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
       <div class="text1">AAA</div>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
      <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
      <div class="text2">BBB</div>
      </a>
    </div>
  </div>
</div>

This might help: http://stackoverflow.com/questions/11213259/javascript-animation — Rajesh, Oct 03 '16 at 12:44
in pure javascript this can only be done with adding a class that will handle the transition with css3 — Panagiotis Vrs, Oct 03 '16 at 12:44
You can do this with CSS only take a look here : https://jsfiddle.net/ProLoser/nurx8/ — Steeve Pitis, Oct 03 '16 at 12:45
@PanagiotisVrs Then how do they do it in jQuery? That's written in pure js — andrew, Oct 03 '16 at 12:46
Personally, I'll use `css positioning` to and `css transition`, just toggle css classes in javascript. — Gabriel Glenn, Oct 03 '16 at 12:46
You can also mimic animation with a timer or animationframe, but I would not go that way if CSS can do it for you. — trincot, Oct 03 '16 at 12:47
@andrew nothing is impossible in programming but comes with a cost. You can animate something lets say from 1px to 50px. You can increment 1px +1 to reach 50px height and the opposite. But this comes with a programming cost and also a rendering cost in the browsers. Always pay attention in that because this affect mobile devices. Thats why css is the way to go — Panagiotis Vrs, Oct 03 '16 at 17:48

Andrew Bone · Accepted Answer · 2016-10-03T13:29:42.513

Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).

.caption {
  height: 250px;
  width: 355px;
  overflow: hidden;
}
.caption-image {
  height: 100%;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}

<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

Version with JS sizing:

Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.

var captionSel = document.querySelectorAll('.caption');

for (let i = 0; i < captionSel.length; i++) {
  let image = captionSel[i].querySelector(":scope > .caption-image");
  let text = captionSel[i].querySelector(":scope > .caption-text");
  text.style.width = image.clientWidth - 20 + "px";
  captionSel[i].style.height = image.clientHeight + "px";
}

.caption {
  overflow: hidden;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}

<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

@Front-endDeveloper when you do a `querySelector` it scans the entire document, but when you put in `:scope` in it means there is a starting point (the starting point being `captionSel[i]` in this case). — Andrew Bone, Oct 03 '16 at 14:05
Another way to put it would be just relations of `captionSel[i]` — Andrew Bone, Oct 03 '16 at 14:05

score 0 · Answer 2 · answered Oct 03 '16 at 12:48

I'll give it to you even better: No javascript at all! This is possible with pure CSS:

.tumb-wrapper {
    position: relative;
    overflow: hidden;
}

.text {
 text-align: center;
 background-color: grey;
 width: 100%;
 height: 10%;
 font-size: 20px;
 color: white;
 opacity: 0.7;
 display: block;
    position: absolute;
    bottom: -30px;
    transition: 300ms;
    left: 0;
}

.tumb-wrapper:hover .text {
    bottom: 28px;
}

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.bbc.com" target="_blank" class="image">
      <img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
       <div class="text">AAA</div>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="tumb-wrapper">
      <a href="http://www.cnn.com" target="_blank" class="image">
      <img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
      <div class="text">BBB</div>
      </a>
    </div>
  </div>
</div>

The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.

You should note however, that ancient IE versions won't be able to use this

score 0 · Answer 3 · answered Oct 03 '16 at 13:16

I usually do this with only CSS. Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.

Example of my code:

<div id="thumb_Wrapper">    
  <div class="_Thumb"> 
    <img src="images/Thumb.jpg" class="Animate_left"> 
  </div>  
</div>

The CSS

#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
  ._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
  ._Thumb > img:hover{left:-18px; cursor:pointer;}

CSS Animation

.Animate_left{transition:left .3s;}

Now all you have to do is swap out the image. onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.

You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class. You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.

slidetoggle in pure Javascript

3 Answers3