jonsadka/.block

## .block
license: mit
border: yes

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
  <!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      html {
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
      }
      .container {
        width: 230px;
        height: 120px;
        transition: width 0.3s, height 0.3s;
      }
      .container:hover {
        width: 1280px;
        height: 500px;
      }
      .container:hover .iframe-wrapper {
        width: 960px;
      }
      .iframe-wrapper {
        position: relative;
        height: 100%;
      }
      iframe {
        position: absolute;
        border-width: 0;
        /* 230 * (1/.23)*/
        width: 1000px;
        /* 120 * (1/.23)*/
        height: 522px;
        transform: scale(0.23);
        transition: transform 0.3s;
        /* Make sure we are fixed to top left corner */
        transform-origin: 0 0;
      }
      .description-container {
        background-color: pink;
        width: 0;
        position: absolute;
        height: 120px;
        top: 0;
        left: 0;
        opacity: 0;
        transition: height 3s;
      }
      .container:hover .description-container {
        transition-delay: 0.4s;
        transition-property: left, opacity;
        transition-duration: 0.4s;
        opacity: 1;
        width: 320px;
        height: 500px;
        left: 960px;
      }
      .container:hover iframe {
        width: 100%;
        height: 100%;
        transform: scale(1);
      }
      .container iframe,
      .container .description-container {
        opacity: 0;
      }
      .container:hover iframe,
      .container:hover .description-container {
        opacity: 1;
      }
      .container:hover .thumbnail {
        display: none;
      }
      .thumbnail {
        position: absolute;
        background-color: rgb(243, 243, 243);
        height: 120px;
        display: inline-block;
        width: 230px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <a class="thumbnail" href="https://bl.ocks.org/jonsadka/3bddce9b5f6b167fffbb" target="_blank" style="background-image: url(&quot;https://gist.githubusercontent.com/jonsadka/3bddce9b5f6b167fffbb/raw/08eb6477ca0f12a8f43104042863a815a40502ec/thumbnail.png&quot;);"></a>
      <div class="description-container">
        Details
      </div>
      <div class="iframe-wrapper">
        <iframe sandbox='allow-popups allow-scripts allow-forms allow-same-origin' src="https://cdn.rawgit.com/jonsadka/3bddce9b5f6b167fffbb/raw/9b2139f4aa475397284cc98b535c9f3de2bddda6/index.html" margin-width='0' margin-height='0' scrolling='no'></iframe>
      </div>
    </div>
    <p style="padding: 5px;">
      Lorem ipsum dolor sit amet, ius no esse iriure. Cum cu reque nusquam. Eos illud delenit ne. Lorem viderer probatus ne sea, vim alienum vivendum gloriatur ad.

      Ea pri magna impedit, no habeo falli mei. Cu nullam delicatissimi pro, alii causae laboramus nam an. Mea ut case partem dissentiunt, eam at justo deterruisset. Legere adipiscing constituam no per, offendit forensibus at sea, te impetus adolescens has. Delectus concludaturque eum an, pro docendi convenire consulatu id. Vero sententiae vix ex, altera laoreet at mel, accusamus dignissim referrentur has eu.

      Quas feugait fuisset et sit, aliquip convenire at est. Augue efficiendi usu an, no esse dicant prodesset quo. Legere melius necessitatibus in qui. Lorem appareat repudiare ut usu, an suas utamur scripta cum.

      His quas legere delenit te, nisl nibh voluptatibus ne eos, vis malis urbanitas an. Ei qui appetere voluptatibus, ferri ridens id eum, cu duo nulla animal. An prima repudiare cum. Ex qui mollis voluptua sententiae, veniam expetendis mel ad.

      Errem omittantur nam cu, ut postea putant fastidii sea, velit discere duo an. Porro regione et pri, veri rebum verterem vis ex. Sit alii laoreet ea, possit causae sit et, omnis justo ne nec. Ne nisl nullam ubique quo, facilis appetere ne quo, reprimique efficiendi cu nec. In integre legimus mandamus quo. Magna singulis ut cum, in dicta nusquam elaboraret sea.
    </p>
  </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	html {
	box-sizing: border-box;
	}
	, :before, *:after {
	box-sizing: inherit;
	}
	.container {
	width: 230px;
	height: 120px;
	transition: width 0.3s, height 0.3s;
	}
	.container:hover {
	width: 1280px;
	height: 500px;
	}
	.container:hover .iframe-wrapper {
	width: 960px;
	}
	.iframe-wrapper {
	position: relative;
	height: 100%;
	}
	iframe {
	position: absolute;
	border-width: 0;
	/* 230 * (1/.23)*/
	width: 1000px;
	/* 120 * (1/.23)*/
	height: 522px;
	transform: scale(0.23);
	transition: transform 0.3s;
	/* Make sure we are fixed to top left corner */
	transform-origin: 0 0;
	}
	.description-container {
	background-color: pink;
	width: 0;
	position: absolute;
	height: 120px;
	top: 0;
	left: 0;
	opacity: 0;
	transition: height 3s;
	}
	.container:hover .description-container {
	transition-delay: 0.4s;
	transition-property: left, opacity;
	transition-duration: 0.4s;
	opacity: 1;
	width: 320px;
	height: 500px;
	left: 960px;
	}
	.container:hover iframe {
	width: 100%;
	height: 100%;
	transform: scale(1);
	}
	.container iframe,
	.container .description-container {
	opacity: 0;
	}
	.container:hover iframe,
	.container:hover .description-container {
	opacity: 1;
	}
	.container:hover .thumbnail {
	display: none;
	}
	.thumbnail {
	position: absolute;
	background-color: rgb(243, 243, 243);
	height: 120px;
	display: inline-block;
	width: 230px;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<a class="thumbnail" href="https://bl.ocks.org/jonsadka/3bddce9b5f6b167fffbb" target="_blank" style="background-image: url("https://gist.githubusercontent.com/jonsadka/3bddce9b5f6b167fffbb/raw/08eb6477ca0f12a8f43104042863a815a40502ec/thumbnail.png");"></a>
	<div class="description-container">
	Details
	</div>
	<div class="iframe-wrapper">
	<iframe sandbox='allow-popups allow-scripts allow-forms allow-same-origin' src="https://cdn.rawgit.com/jonsadka/3bddce9b5f6b167fffbb/raw/9b2139f4aa475397284cc98b535c9f3de2bddda6/index.html" margin-width='0' margin-height='0' scrolling='no'></iframe>
	</div>
	</div>
	<p style="padding: 5px;">
	Lorem ipsum dolor sit amet, ius no esse iriure. Cum cu reque nusquam. Eos illud delenit ne. Lorem viderer probatus ne sea, vim alienum vivendum gloriatur ad.

	Ea pri magna impedit, no habeo falli mei. Cu nullam delicatissimi pro, alii causae laboramus nam an. Mea ut case partem dissentiunt, eam at justo deterruisset. Legere adipiscing constituam no per, offendit forensibus at sea, te impetus adolescens has. Delectus concludaturque eum an, pro docendi convenire consulatu id. Vero sententiae vix ex, altera laoreet at mel, accusamus dignissim referrentur has eu.

	Quas feugait fuisset et sit, aliquip convenire at est. Augue efficiendi usu an, no esse dicant prodesset quo. Legere melius necessitatibus in qui. Lorem appareat repudiare ut usu, an suas utamur scripta cum.

	His quas legere delenit te, nisl nibh voluptatibus ne eos, vis malis urbanitas an. Ei qui appetere voluptatibus, ferri ridens id eum, cu duo nulla animal. An prima repudiare cum. Ex qui mollis voluptua sententiae, veniam expetendis mel ad.

	Errem omittantur nam cu, ut postea putant fastidii sea, velit discere duo an. Porro regione et pri, veri rebum verterem vis ex. Sit alii laoreet ea, possit causae sit et, omnis justo ne nec. Ne nisl nullam ubique quo, facilis appetere ne quo, reprimique efficiendi cu nec. In integre legimus mandamus quo. Magna singulis ut cum, in dicta nusquam elaboraret sea.
	</p>
	</body>