title: Fade out (and display none) and fade in another element
body: <p>I´ve made a site with three pictures and three buttons under each of the pictures. When you clicked on a button the picture disappears and a icon take its place. Now it switch element direct but i wanna have som fade out and fade in. Any idea how i can accomplish that?  I´ve tried opacity but when the animation appears so disappears not the element but it´s invisible.
  <strong>Html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="sv"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;A&amp;amp;A-design&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
    &lt;link type="text/css" rel="stylesheet" href="main.css"&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
     &lt;header class="col-md-12 col-xs-12 text-center"&gt;
       &lt;h1 class="linje-botten"&gt;A&amp;amp;A-design&lt;/h1&gt;
       &lt;!--fixa någon logga här--&gt;
       &lt;nav class= "navbar navbar-inverse"&gt;
         &lt;ul class="nav navbar-nav"&gt;
           &lt;li class="bakgrund"&gt;&lt;a href="om.html"&gt;Om oss&lt;/a&gt;&lt;/li&gt;
           &lt;li class="bakgrund"&gt;&lt;a href="projekt.html"&gt;Tidigare projekt&lt;/a&gt;&lt;/li&gt;
           &lt;li class="bakgrund"&gt;&lt;a href="priser.html"&gt;Priser&lt;/a&gt;&lt;/li&gt;
           &lt;li class="bakgrund"&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
           &lt;li class="bakgrund"&gt;&lt;a href="hitta.html"&gt;Hitta hit&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
       &lt;/nav&gt;
     &lt;/header&gt;
     &lt;main&gt;
           &lt;i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
             &lt;img src="../f%C3%B6retag/bilder/data1.jpg" alt=""&gt;
             &lt;button class="btn btn-block btn-primary" type="button"&gt;&lt;i class="fa fa-thumbs-o-up" aria-hidden="true"&gt;&lt;/i&gt;Gilla&lt;/button&gt;
             &lt;button class="btn btn-block btn-info" type="button"&gt;&lt;i class="fa fa-info" aria-hidden="true"&gt;&lt;/i&gt;Info&lt;/button&gt;
             &lt;button class="btn btn-block btn-danger" type="button"&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;Skicka till papperskorgen&lt;/button&gt;
           &lt;/div&gt;
           &lt;i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
             &lt;img src="../f%C3%B6retag/bilder/data2.jpg" alt=""&gt;
             &lt;button id="button" class="btn btn-block btn-primary" type="button"&gt;&lt;i class="fa fa-thumbs-o-up" aria-hidden="true"&gt;&lt;/i&gt;Gilla&lt;/button&gt;
             &lt;button class="btn btn-block btn-info" type="button"&gt;&lt;i class="fa fa-info" aria-hidden="true"&gt;&lt;/i&gt;Info&lt;/button&gt;
             &lt;button class="btn btn-block btn-danger" type="button"&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;Skicka till papperskorgen&lt;/button&gt;
           &lt;/div&gt;
           &lt;i class="fa fa-trash col-md-4 col-xs-1 col-sm-6 big-trash" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;i class="fa fa-info big-info col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;i class="fa fa-thumbs-o-up big-thumb col-md-4 col-sm-6 col-xs-12" aria-hidden="true" style="display:none"&gt;&lt;/i&gt;
           &lt;div class="col-md-4 col-sm-6 col-center col-xs-12"&gt;
             &lt;img src="../f%C3%B6retag/bilder/data3.jpg" alt=""&gt;
             &lt;button class="btn btn-block btn-primary" type="button"&gt;&lt;i class="fa fa-thumbs-o-up" aria-hidden="true"&gt;&lt;/i&gt;Gilla&lt;/button&gt;
             &lt;button class="btn btn-block btn-info" type="button"&gt;&lt;i class="fa fa-info" aria-hidden="true"&gt;&lt;/i&gt;Info&lt;/button&gt;
             &lt;button class="btn btn-block btn-danger" type="button"&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;Skicka till papperskorgen&lt;/button&gt;
           &lt;/div&gt;
       &lt;div class="col-md-4 col-sm-6 col-xs-12 col-sm-offset-3 col-md-offset-4" id="klocka"&gt;&lt;/div&gt;
      &lt;/main&gt;
      &lt;/div&gt;
    &lt;/div&gt;
     &lt;script src="https://use.fontawesome.com/ab9989071e.js"&gt;&lt;/script&gt;
     &lt;script src="main.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.col-md-4 img {
    width: 100%;
    height: auto;
  }
  
  
  @media (min-width:768px) and (max-width:992px) {
    .col-center {
      float: none;
      margin: 0 auto;
    }
  }
  
  .linje-botten {
    border-bottom: 3px solid black;
  }
  
  li:hover {
    background-color: #1a542b;
  }
  
  .navbar-nav {
    margin: 0px;
    font-size: 1.4em;
  }
  /* #1a542b #eb9822 */
  
  .navbar-inverse .navbar-nav&gt;li&gt;a {
    color:white;
  }
  
  .col-sm-6 {
  margin-bottom: 5px;
  }
  
  img {
    margin-bottom: 3px;
  }
  
  .navbar-inverse {
    box-shadow: #515d63 4px 4px 4px;
  }
  
  body {
    background-color: #eb9822;
  }
  
  .big-thumb, .big-info, .big-trash{
    font-size:300px!important;
    float: left;
  }
  
  @media (max-width:768px) {
  .big-thumb, .big-info, .big-trash {
    font-size: 300px!important;
    float: none;
    text-align: center;
    }
  }
  
  #klocka {
    border: 5px black solid;
    font-size: 1.5em;
    color: #ff8500;
    background-color: #3e4241;
    text-align: center;
    border-radius: 4px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var tumme = document.getElementsByClassName("btn-primary");
  
  for (i=0;i&lt;tumme.length;i++) {
  tumme[i].onclick=function() {
  this.parentElement.style.display='none'
  this.parentElement.previousElementSibling.style.display='block';
  
  }
  };
  
  thumbs=document.getElementsByClassName("big-thumb");
  for(j=0;j&lt;thumbs.length;j++) {
  thumbs[j].addEventListener("click", function(){
  this.style.display='none';
  this.nextElementSibling.style.display='block';
  })};
  
  var info = document.getElementsByClassName("btn-info");
  
  for (i=0;i&lt;info.length;i++) {
      info[i].onclick = function() {
      this.parentElement.style.display='none';
      this.parentElement.previousElementSibling.previousElementSibling.style.display='block';
    }
  };
  
  bigInfo=document.getElementsByClassName("big-info");
  for(j=0;j&lt;bigInfo.length;j++) {
      bigInfo[j].addEventListener("click", function() {
      console.log("hej");
      this.style.display='none';
      this.nextElementSibling.nextElementSibling.style.display='block';
    })
  }
  
  var trash = document.getElementsByClassName("btn-danger")
  for(i=0;i&lt;trash.length;i++) {
    trash[i].onclick = function() {
    console.log("333");
    this.parentElement.style.display = 'none';
    this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.style.display = 'block';
      console.log(this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling);
    };
  }
  
  bigTrash=document.getElementsByClassName("big-trash");
  for(j=0;j&lt;bigTrash.length;j++) {
    bigTrash[j].addEventListener("click", function() {
      this.style.display='none';
      this.nextElementSibling.nextElementSibling.nextElementSibling.style.display='block';
    })
  }
  
  
  document.onload = visatid();
  
  function visatid() {
    //Datum
    var date = new Date();
    var year = date.getYear();
    if (year &lt; 1000) {
      year += 1900;
    }
    var day = date.getDay();
    var month = date.getMonth()+1;
    var daym = date.getDate();
    var dayarray = new Array("Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag");
    var montharray = new Array("Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December");
  
    //Tiden
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
      if (h===24) {
        h = 0;
      }
  
      if (h &lt; 10) {
        h = "0" + h;
      }
  
      if (m &lt; 10) {
        m = "0" + m;
      }
  
      if (s &lt; 10) {
        s = "0" + s;
      }
  
    var clock = document.getElementById("klocka");
    console.log(month);
    console.log(day);
    console.log(dayarray[day-1]);
    console.log(montharray[month-1]);
  
    clock.innerHTML = "Hej dagens datum är "+dayarray[day-1]+" "+daym+" "+montharray[month-1]+" "+year+" och klockan är i nuläget "+h+":"+m+":"+s;
    setTimeout(visatid, 1000);
  }
  </code></pre>