Add Code Block > paste all code
<main class="page">
<div class="row">
<div class="col-md-12">
<div class="mood-board">
<div class="title">
<h1 class="align-center">From Trouville-sur-Mer</h1>
</div>
<!-- Start of Mood Board Bg -->
<div id="background" class="images">
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990802994cae5530aa4d3/1473876096339/5706067294_df3f598fc3.jpg" alt="" />
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d9909e2994cae5530aa608/1473876127131/visitez-la-cotes-basquesss.JPG" alt="" />
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990ad2994cae5530aa6b6/1473876141612/tumblr_inline_nmr7wkhRzo1r2u8iv_500.jpg" alt="" />
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990bd2994cae5530aa7eb/1473876157299/9718096_2.jpg" alt="" />
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990db2994cae5530aaab7/1473876187333/Bernard-Villemot-portrait-affichiste-graphiste-FR-index-grafik.jpg" alt="Bernard-Villemot-portrait" />
<p class="description">
<i>Bernard Villemot – French graphic artist (1911 - 1989).</i>
</p>
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990e72994cae5530aab4b/1473876200141/orangina.jpg" alt="Orangina" />
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990fd2994cae5530aac9c/1473876222103/bergasol.jpg" alt="Bergazol" />
</div>
<div class="draggable resizeable element">
<img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d991092994cae5530aad29/1473876233277/perrier.jpg" alt="Perrie" />
</div>
</div>
<!-- Mood board Bg ends -->
</div>
</div>
</div>
</main>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.theme.css"/>
<style>
/*
==============================================
Fonts Installation
==============================================
*/
@import "https://fonts.googleapis.com/css?family=Droid+Serif";
@font-face {
font-family: 'Bodoni';
src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad241414fb5d694751ab7/1473958465275/BodoniFLF-Roman.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Bodoni Bold';
src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad236414fb5d694751a44/1473958454896/BodoniFLF-Bold.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Bodoni Italic';
src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad23b414fb5d694751a73/1473958460144/BodoniFLF-Italic.ttf");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Bodoni Bold Italic';
src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad231414fb5d694751a13/1473958449544/BodoniFLF-BoldItalic.ttf");
font-weight: bold;
font-style: italic;
}
/*
==============================================
Variables
==============================================
*/
/*
==============================================
Mixins
==============================================
*/
/*
==============================================
Overall styles
==============================================
*/
.align-center {
text-align: center;
}
h1 {
font-family: "Bodoni Bold", Garamond, "Times New Roman", serif;
font-size: 7vw;
color: #000;
letter-spacing: -0.02em;
}
p {
font-family: "Bodoni Italic", Garamond, "Times New Roman", serif;
font-size: 0.8em;
font-style: italic;
padding-top: 0.5em;
letter-spacing: 0.09em;
}
.description {
display: none;
}
.mood-board {
width: 100%;
height: 100vh;
background: #ffeecc;
position: relative;
}
.mood-board .title {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 40vh;
}
.mood-board .images {
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
margin: auto;
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.mood-board .element {
position: absolute;
z-index: 0;
}
.mood-board .element:hover .description {
display: block;
}
.mood-board .element img {
width: 100%;
height: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://kseniaksenia.squarespace.com/s/jqueryuitouch-punchmin.js"></script>
<script>
$(document).ready(function() {
var draggable = $('.draggable');
var resizable = $('.resizeable');
var element = $('.element');
element.each( setRandomSize );
element.each( setRandomPosition );
resizable.resizable({
containment: "#background",
aspectRatio: true,
handles: "n, w, s, e"
});
draggable.draggable({
cursor: "move",
containment: "#background",
stack: ".element",
});
if(window.innerHeight > window.innerWidth){
}
function setRandomSize(){
//Get IMG size
var img = $(this).find('img');
imgHeight = img.outerHeight();
imgWidth = img.outerWidth();
if(window.innerHeight > window.innerWidth){
//Generate random Width % [10, 60]
var randomWidth = randomIntFromInterval(10, 60);
$(this).css({
width: randomWidth + '%'
});
} else {
//Change Height to [100, 330] randomly
var randomHeight = randomIntFromInterval(100, 330);
//Calc proportional width
var proportionalWidth = (imgWidth * randomHeight) / imgHeight;
$(this).css({
height: randomHeight + 'px',
width: proportionalWidth + 'px'
});
}
}
function setRandomPosition(){
//Generate random Top % [0, 75]
var randomTop = randomIntFromInterval(0, 75);
//Generate randon Left % [0, 85]
var randomLeft = randomIntFromInterval(0, 75);
$(this).css({
top: randomTop + '%',
left: randomLeft + '%'
})
}
function randomIntFromInterval(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
});
</script>
It uses some external JS library & CSS. This can cause problems when editing or adding blocks.
