title: add transitional effect (fade-in) from small image to large image on button click
body: <p>Noob here.</p>
  <p>I've written a javascript which will trade/swap out a small image for a larger (both wider and taller) image.</p>
  <p>The SMALLER IMAGE (the default) appears on load and is part of the brief/condensed view. When we CLICK ON THE HEADLINE, we open the larger/detailed view and the short descriptions are replaced by more in-depth/longer text descriptions.</p>
  <p>I am unfamiliar with js, but I've managed to get myself to this point which everything I want to happen is happening. However, looking at the result, it feels a little jarring, hence i'd like to ease the speed of the transformation - as the depth of the window is largely determined by transition/replacement of the larger image, I would like to if it is possible, transform/transition/animate the replace of the small image to the large on taking maybe a second to do so?</p>
  <p>I am looking for help in achieving. The end goal being that the the replacements don't appear quite so fast so as not to be so jarring.</p>
  <p>I would like to avoid jQuery if possible.</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 sw_switchDETAILS() {
    //  transoform content
    //  changing   div class  =&gt;  allows hide/show of specific content
    const element = document.getElementById("description00");
    if (element.className == "showTHIS") {
      element.className = "hideTHIS";
    } else {
      element.className = "showTHIS";
    }
  }
  
  
  function pictureChange() {
    //  transoform image
    if (document.getElementById("image00").src == "&lt;?=$square;?&gt;") {
      document.getElementById("image00").src = "&lt;?=$profile;?&gt;";
    } else {
      document.getElementById("image00").src = "&lt;?=$square;?&gt;";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wp-100 {
    width: 100%;
  }
  
  .wx-200 {
    width: 200px;
  }
  
  .wx-50 {
    width: 50px;
  }
  
  .wx-60 {
    width: 60px;
  }
  
  .wx-80 {
    width: 80px;
  }
  
  .wx-100 {
    width: 100px;
  }
  
  .mwx-200 {
    max-width: 200px;
  }
  
  .showTHIS {
    /* border:4px solid  lightgoldenrodyellow; */
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
  }
  
  .hideTHIS {
    /* border:4px solid  lightblue; */
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
  }
  
  
  /*  hide extended content  =&gt;  Full Description, Participants, Location */
  
  div#description00.hideTHIS p#hd-description.contentHIDE,
  div#description00.hideTHIS p#hd-participants.contentHIDE,
  div#description00.hideTHIS p#hd-location.contentHIDE {
    display: none;
    overflow: hidden;
  }
  
  
  /*  show small img  =&gt;  as we are in teaser / short / minimal content mode  */
  
  div#image00.hideTHIS img.largeIMG {
    display: none;
    overflow: hidden;
  }
  
  
  /*  show  breif/basic teaser content  =&gt;  breif description
          /*  hide breif as we know are showing full description  */
  
  div#description00.showTHIS p#sw-breif {
    display: none;
    overflow: hidden;
  }
  
  
  /*  hide small img - use larger image as we have available white space  */
  
  div#image00.showTHIS img.smallIMG {
    display: none;
    overflow: hidden
  }
  
  .btn_toggleTITLE {
    writing-mode: horizontal-tb !important;
    font-weight: bold;
    font-size: 18px;
    font-family: 'ff-bscompMED';
    color: #981e21;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-align: left;
    background-color: transparent;
    margin: 0 0 .3em 0;
    padding: 0px;
    border-width: 0px;
    border-style: outset;
    border-color: transparent;
    border-image: initial;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="mSIDES-8px  mb-8px " style="border:4px solid #dedede!important;"&gt;
    &lt;table id="" class=""&gt;
      &lt;tr&gt;
        &lt;td class="va-top  pa-8px  pr-none"&gt;
  
          &lt;img id="image00" src="http://placekitten.com/80/80"&gt;
  
        &lt;/td&gt;
        &lt;td class="va-top  wp-100  pa-8px"&gt;
  
          &lt;p id="" class="mb-4px"&gt;
            &lt;button id="btn00" onclick="sw_switchDETAILS(); pictureChange()" class="btn_toggleTITLE    ta-justify  fs-20px  ff-bscompMED"&gt;STORY / ARTICAL TITLE HERE&lt;/button&gt;
            &lt;sup class="fs-14px"&gt;x | x | x&lt;/sup&gt;
            &lt;a href="#" class="float-end  fs-12px  fw-500  tt-upper"&gt;go 2 thread &lt;i class="fas fa-rocket"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/p&gt;
  
          &lt;div id="description00" class="hideTHIS"&gt;
            &lt;p id="sw-breif" class="wp-100  ta-justify  mb-4px"&gt;&lt;strong class="c-redDARK"&gt;BRIEF:&lt;/strong&gt; Breif description visible if extended desc hidden; 128 characters or less&lt;/p&gt;
            &lt;!--  this content should be hidden on initial load, revealed with mouse click on title --&gt;
            &lt;p id="hd-description" class="wp-100  ta-justify  mb-4px  contentHIDE"&gt;&lt;strong class="c-redDARK"&gt;DESCRIPTION:&lt;/strong&gt; Extended descrip hidden if breif desc visible; Upto 1000 characters; That's great. You did the hardest part. You took the jump, you didn't know where you were gonna come down. And that's it. That's
              those little brave baby steps we gotta take. To try and become whole again, try and find purpose. I went in the ice in '45 right after I met the love of my life. Woke up 70 years later. You gotta move on. Gotta to move on. The world is in
              our hands. It's left to us guys, and we got to do something with it. Otherwise... Thanos should have killed all of us.&lt;/p&gt;
            &lt;!--  this content should be visible on initial load, hidden on mouse click of title --&gt;
            &lt;p id="sw-order" class="wp-100  ta-justify  mb-4px  contentHIDE"&gt;&lt;strong class="c-redDARK"&gt;ORDER:&lt;/strong&gt; Breif description visible if extended desc hidden; 128 characters or less&lt;/p&gt;
            &lt;p id="hd-participants" class="wp-100  ta-justify  mb-4px  contentHIDE"&gt;&lt;strong class="c-redDARK"&gt;PARTICIPANTS:&lt;/strong&gt; Extended descrip hidden if breif desc visible; Upto 1000 characters; &lt;/p&gt;
            &lt;!--  this content should be hidden on initial load, revealed with mouse click on title --&gt;
            &lt;p id="hd-location" class="wp-100  ta-justify  mb-4px  contentHIDE"&gt;&lt;strong class="c-redDARK"&gt;LOCATIONS:&lt;/strong&gt; Extended descrip hidden if breif desc visible; Upto 1000 characters; &lt;/p&gt;
          &lt;/div&gt;
  
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
  
  &lt;/div&gt;
  
  &lt;?php
          #  st   test variables
          $profile = 'http://placekitten.com/200/500';
          $square  = 'http://placekitten.com/80/80';
      
      ?&gt;</code></pre>
  </div>
  </div>
  </p>