JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="overlay">
  <div class="center">
    <div class="balk">De button pack. - 12 euro</div>
    <div class="iets">
     <iframe src="https://personalbodyplan.com/" style="border:0;width:100%;height:100%;">

     </iframe>
    </div>
    <div class="content">jdwaiu udhwaoi iuohdwaiu hudhwa hdwuh3892ue 387y30 yuihasuiajc hauihoaw hioudhwaoih uioho uhawih udhwqiud hwaoiu hd3he8u euidhawuifhruigh pvfdjkvnjknhrui duheoui hwqidsjknskjldahiuethrrt9 893908ru 83ue 8audiaovsdjj sduij fpuoidjpoia</div>
  </div>
</div>

<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center; background-size:cover;"></div>
</div>
<div class="project">
  <div class="img" style="background:url('https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1920x1080.jpg') center;...

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.project{
  float:left;
  width:25%;
  padding:0px 10px;
  margin:10px 0;
}
.project .img{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  width:100%;
  height:150px;
  background:orange;
  transition: all 0.5s ease;
  z-index:999;
}

.overlay{
  position:fixed;
  width:100%;
  height:100vh;
  background:rgba(0, 0, 0, 0.39);
  z-index:99;
  opacity:0;
  visibility:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  transition:all 0.5s ease;
  overflow:auto;
}
.overlay.show{
  opacity:1;
  visibility:visible;
}
.overlay .center{
   margin:50px 0;
}
.overlay .balk{
  width:550px;
  height:70px;
  background:white;
  transform: translateY(70px);
  transition: all 0.5s ease;
  position:relative;
  z-index:9998;
  opacity:0;
}
.overlay .iets{
  width:550px;
  height:450px;
  background:white;
  transition: all 0.3s ease;
  opacity:0;
  position:relative;
  z-index:9999;
}
.overlay .content{
  width:550px;
  height:650px;
  background:white;
  transition: all 0.5s ease;
  transform: translateY(650px);
  opacity:0;
  position:relative;
  z-index:9998;
}
.overlay .iets.show{
  opacity:1;
}
.overlay .balk.show{
  opacity:1;
  transform: translateY(0px);
}
.overlay .content.show{
  opacity:1;
  transform: translateY(0px);
}

JavaScript

$(".project").each(function(){
	var $this = $(this),
			offsetL = $this.offset().left,
      offsetT = $this.offset().top,
      
      el = $(this).find('.img'),
  		$w = el.outerWidth(),
  		$h = el.outerHeight();
      
	el.css({"width": $w, "top": offsetT, "left": offsetL + 10});
});


$(document).on('click', '.project', function(){

	if($(this).hasClass('active')){
  	return
  } else {
    //Get the width and height of img element;
    var el = $(this).find('.img'),
        $w = el.outerWidth(),
        $h = el.outerHeight(),

        offsetL = $(this).offset().left,
        offsetT = $(this).offset().top,
        
        getPopupT = $(".overlay").find('.iets').offset().top,
        getPopupL = $(".overlay").find('.iets').offset().left,
        getPopupW = $(".overlay").find('.iets').outerWidth(),
        getPopupH = $(".overlay").find('.iets').outerHeight();
    //Parent;
    $(this).addClass('active').css({"height": $h});

    //Makes the element img absolute and go to center;
    el.css({"position":"absolute", "top": getPopupT, "left": getPopupL, "width": getPopupW, "height": getPopupH});

    //show overlay;
    $(".overlay").addClass("show");
          $(".overlay").find('.content').addClass('show');
                $(".overlay").find('.balk').addClass('show');
    
    setTimeout(function(){
    	$(".overlay").find('.iets').addClass('show');
      el.css({"opacity": 0, "visibility": "hidden"});
    }, 500);
  }
});

$(".overlay").on('click', function(){
	$(this).removeClass('show');
  
  var getT = $(".project.active").offset().top,
  		getL = $(".project.active").offset().left,
      
      $w = $(".project.active").outerWidth(),
  		$h = $(".project.active").outerHeight();
      
  $(".project.active").find('.img').css({"opacity": 1, "position":"absolute", "top": getT, "left": getL + 10, "margin-top": 0, "margin-left": 0, "width": $w - 20, "height": $h, "visibility": "visible"});
  
  setTimeout(function(){ ...