<div>
<iframe src="https://codepen.io/claarman/full/EaGNKj/"></iframe>
</div>
<div>
<iframe src="https://codepen.io/claarman/full/KwJdja"></iframe>
</div>
<div>
<iframe src="https://codepen.io/claarman/full/XJxqmG"></iframe>
</div>
<div>
<iframe src="https://codepen.io/claarman/full/vEQKOb"></iframe>
</div>
<span>click here to get out of fullscreen mode</span>
iframe {
border: 0;
width: 100%;
height: 100%;
}
body {
position: absolute;
margin: 0px;
font-family: verdana;
font-size: 12px;
background-color: #ddd;
}
span {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
color: white;
background-color: #444;
text-align: center;
overflow: hidden;
display: inline;
vertical-align: middle;
border: 1px solid #666;
border-width: 0 0 1px 0;
z-index: 3;
padding: 8px;
transition: all .3s;
cursor: pointer;
&:hover {
background-color: #333;
}
}
div {
z-index: 1;
position: fixed;
top: 32px;
left: 0;
bottom: 0;
right: 0;
background-color: #333;
transform: scale(0.15);
transition: transform .3s, margin .1s;
transition-delay: .01s;
box-shadow: 0px 0px 40px rgba(0,0,0,.5);
cursor: pointer;
&:before {
transition: opacity .3s;
position: absolute;
content: '';
top: 0;
left: 0;
z-index: 2;
background-color: black;
opacity: .2;
width: 100%;
height: 100%;
}
&:hover {
transform: scale(0.16);
box-shadow: 0px 0px 40px black;
&:before {
opacity: 0;
}
}
&:nth-child(1) {
top: -60%;
left: -70%;
}
&:nth-child(2) {
top: -60%;
left: -21%;
}
&:nth-child(3) {
top: -60%;
right: -21%;
}
&:nth-child(4) {
top: -60%;
right: -70%;
}
&.active {
z-index: 2;
transform: scale(1);
margin: 0;
top: 32px;
left: 0;
bottom: 0;
right: 0;
&:before {
display: none;
}
}
}
View Compiled
$('div').on('click', function() {
$(this).addClass('active');
});
$('span').on('click', function(e) {
$('div').removeClass('active');
});
This Pen doesn't use any external CSS resources.