JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<!DOCTYPE html>
<html lang="it">

  <head>
    <meta charset="utf-8">
    <title>Titolo</title>
    <link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function() {
$("#bar").click( function() {
  $("#cont").toggleClass("switch");
});

});

</script>
    <style>
    
    * {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    }
    
    #cont {
    text-align: right;
    padding: 1px;
    position: relative;
    line-height: 0px;
    }
    
    #video {
    background: #ccc;
    width: 100%; /*no needed for div but we fake this is video*/
    z-index: 0;
    display: inline-block;
    }
    
    #video img {
    width: 100%;
    }
    
    #slide {
    background: #ccc;
    z-index: 1;
    width: 25%;
    margin-top: -30%;
    position: relative;
    display: inline-block;
    }
    
    #slide img {
    width: 100%;
    }
    
    #cont.switch #video {
    z-index: 10;
    width: 20%;
    margin-top: 80%;
    margin-left: 80%;
    position: absolute;
    }
    
    #cont.switch #slide {
    z-index: 0;
    width: 100%;
    margin-top: 0%;
    }
    
    
    
    </style>
  </head>
  
  <body>
  
  <div id="cont">
    <div id="video"><img src="http://www.lovingitaly.com/verona%5Clirica2.jpg" /></div>
    <div id="slide"><img src="http://italiano.linguait.it/img/verone2.jpg" /></div>
  
  </div>
  
  <div id="bar">switch</div>
  
  </body>
</html>