Bootstrap 4

by Juan Muñoz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<div class="row col-12">
  <div class="col-6">
    <div id="myDiv1" class='card rojo'>
      <div class='card-body'>
        <span>My Div1</span>
        <button class='btn'>Full Screen1</button>
        <button class='pantalla'>Pantalla1</button>
      </div>
    </div>
  </div>
  <div class="col">
    <div id="myDiv2" class='card verde'>
       <div class='card-body'>
        <span>My Div2</span>
        <button  class='btn'>Full Screen2</button>
        <button class='pantalla'>Pantalla2</button>
      </div>
    </div>
  </div>
  <div class="col">
    <div id="myDiv3" class='card yellow'>
       <div class='card-body'>
        <span>My Div3</span>
        <button  class='btn'>Full Screen3</button>
        <button class='pantalla'>Pantalla3</button>
      </div>
    </div>
  </div>
</div>

CSS

.card.fullscreen {
  z-index: 9999;
  position: relative;
  top: 0;
  left: -100;
  width: 100%;
     height:100vh !important;

  transform: scale (1);
  transition: all 1s ease;
  transform: translateX(0);
}
.card.fade {
  opacity: 0.5;
}
.posi{
    -webkit-transition-delay:2.5s;

  position:absolute !important;
  /* transform: translateX(0); */
  /* transform: translateY(0); */
}
.card {
  width: 24em;
  height:14em;
  padding:2em;  
  float:left;
  transition: all 2s ease;
  /* -webkit-transition-duration:2s; */
  -webkit-transition-delay:.5s;
}
.rojo{
  /* background: red; */
  
}
.verde{
  /* background: green; */
  
}
.card:hover{
  /* zoom:1.1; */
}

.rojo{
    background-image: url(https://s3.amazonaws.com/uploads.hotmart.com/blog/2017/01/post_url_940x606-670x432.png);
    /* transform: translateX(200px); */
}
.verde{
    background-image: url(https://programacion.net/files/article/20160124010121_url1.jpg);
    /* transform: translateX(-200px); */
}
.yellow{
  
  background-image: url(https://tecnologia-informatica.com/wp-content/uploads/2018/08/que-es-url-como-acortar-url-1.jpeg);
}
.card { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

JavaScript

$(document).ready(function (){
	var pantalla = $( document ).width();
  $('.card').each(function (){
  	var $div = $(this)
    var tamanhoDiv = $div[0].clientWidth * -1
    console.log({pantalla,tamanhoDiv})
    var arreglo = {
      "position": "absolute",
      "left": "0px",
      "z-index": "8"
    }
  	$div.css(arreglo)
  })
})
$('.btn').click(function(e) {
	var $div = $(this).parent().parent(); 
	  $div.toggleClass('fullscreen');
	     setTimeout(function(){
	    $div.toggleClass('posi');
	  }, 600);
	/* console.log($div) */
  
});

$('.pantalla').click(function(e) {
	var $div = $(this).parent().parent(); 
	  /* $div.toggleClass('fullscreen');
	     setTimeout(function(){
	    $div.toggleClass('posi');
	  }, 600); */
	console.log($div)
  var pantalla = $( document ).width();
  var tamanhoDiv = $div[0].clientWidth * -1
  console.log({pantalla,tamanhoDiv})
  var arreglo = {
                    "position": "absolute",
                    "left":tamanhoDiv+"px",
                    "z-index": "8"
                    }
  $div.css(arreglo)
  
});