<html>

<head>
  
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DEVSPOT</title>
    <link rel="stylesheet" type="text/css" href="/home/keyur/Documents/bootstrap/devspot/stylesheets/screen.css">
    <link rel="stylesheet" type="text/css" href="/home/keyur/Documents/bootstrap/devspot/stylesheets/print.css">
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

    <script type="text/javascript" src="/home/keyur/Documents/bootstrap/devspot/js/style.js"></script>
    <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>

<body id="backC">
    <nav class="navbar navbar-default" style="background-color: #1e104d;border: none;text-align:center;">
        <div class="fluid-container posTitle">
            <div class="navbar-header" style="float:none;display:inline-block;">
                <a class="navbar-brand" id="fontStyle" href="#">Masonary Wall</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="grid" style="position: relative;height: 860px;left: 8%;">
            <div class="grid-item grid-item--height2" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2921563/exbp-6_1x.png');background-size: cover;
    background-position: center;background-color:grey;">
            </div>
            <div class="grid-item grid-item--height3" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2930599/bugsnag-2_1x.png');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height4" style="background:url('https://d13yacurqjgara.cloudfront.net/users/594316/screenshots/2930910/pointer-01_1x.jpg');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height1" style="background:url('https://d13yacurqjgara.cloudfront.net/users/594316/screenshots/2841126/radio_polaris_1x.jpg    ');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height3" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2924180/bugsnag-1_1x.png');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height0" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2916925/exbp-5_1x.png');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height1" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2928524/victim-01_1x.png');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height3" style="background:url('https://d13yacurqjgara.cloudfront.net/users/594316/screenshots/2929354/castle_in_the_sky-01_1x.jpg');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height4" style="background:url('https://d13yacurqjgara.cloudfront.net/users/59947/screenshots/2934030/muti-1.jpg');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height1" style="background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT8WewMd60_EzwXg5va6825dSPPi9SoEseFp-UpcPEJLixRaUQ_');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height2" style="background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQN5OLCjrc7fM1e3kRe-aGy67vD6iBwT7GR2f-_JXAgFbVEK7Zg1Q');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height1" style="background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRwJqEJIbDW3ka7QAIWo6tGgvQGhkgBaiT1n48jAsUwpU2Ki5okuQ');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--height1" style="background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSdE8699mCd02F5B2gSipoL0wHXdO0XCkecZAVaJKwB646Qqdsv');background-size:cover;background-position:center;">
            </div>
            <div class="grid-item grid-item--width1" style="background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQyWJpv-jEmCVp-hm8vsQYRxUP7pl0sElUDw7SN3KEFf-wpJFmQ');background-size:cover;background-position:center;">
            </div>
        </div>
    </div>
</body>

</html>
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";

$colColor:#99ccff;
$backColor:#f2f2f2;
$colPost:white;


#backC{
    background-color:#1e104d;
font-family: 'Lobster', cursive;

}
#fontStyle{
    color:white;
    font-weight: 40px;
    font-size: 30px;
    font-stretch: 80px;
}



.grid{

    display: block;

}
/* fluid 5 columns */
.grid-sizer,
.grid-item {
    float:left;
    background-color:grey;
    width: 20%;
    height: 200px;
    margin:5px;


}
/* 2 columns */
.grid-item--width2 {
    background-color:grey;
    width: 40%;
    height:100px;

    margin:5px;

}

.grid-item--width1 { width: 120px; }
.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }


.grid-item--height0 { height: 100px; }
.grid-item--height1 { height: 160px; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }



nav{
    background-color: transparent;
}


.cont{
       position:relative;

}

.block{
    position:absolute;

}

//ANIMATION STARTS HERE

.grid-item{
    transition: transform 300ms ease-In-out;

}

.grid-item:hover{
    transform: translate(15px,15px) scale(1.0,1.0) rotate(-2deg);

}
View Compiled
$(document).ready(function(){
    var $grid = $('.grid').masonry({
      // options...
    });
    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry('layout');
    });



});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.