Grid Display | development

| detail

This development project initially started as a simple plugin inclusion on a website I was working on. After discovering numerous issues which mainly spanned from lack of responsive capabilities I decided to take the basic concept (hover with a dark overlay) and make it into a more flexible and responsive gallery/navigation app. The code can be edited to suit the needs of the user and it works on a variety of responsive platforms. Take a look at the code below to see how it works.

| html

<div id="gridFit"> 
    <div id="gridTiles" class="tilesContainer"> <!-- Contains each grid tile -->
        <div class="containerImage1 imageBoxy"> <!-- Background image of the tile is set here using css -->
            <a class="containerHover" href="#"> <!-- Tile contains text and dark overlay, fades out on hover -->
                <div class="containerText"> <!-- Tile text and frame -->
                    <div class="gridLinkBox">
                        GRID TILE 1
                    </div>
                </div>
                <div class="fadeBase"></div> <!-- Tile dark overlay, fades out on hover -->
            </a>
         </div>

         <div class="containerImage2 imageBoxy">
            <a class="containerHover" href="#">
                <div class="containerText">
                    <div class="gridLinkBox">
                        GRID TILE 2
                    </div>
                </div>
                <div class="fadeBase"></div>
            </a>
         </div>

         <div class="containerImage3 imageBoxy">
            <a class="containerHover" href="#">
                <div class="containerText">
                    <div class="gridLinkBox">
                        GRID TILE 3
                    </div>
                </div>
                <div class="fadeBase"></div>
            </a>
         </div>

         <div class="containerImage4 imageBoxy">
            <a class="containerHover" href="#">
                <div class="containerText">
                    <div class="gridLinkBox">
                        GRID TILE 4
                    </div>
                </div>
                <div class="fadeBase"></div>
            </a>
         </div>

         <div class="containerImage5 imageBoxy">
            <a class="containerHover" href="#">
                <div class="containerText">
                    <div class="gridLinkBox">
                        GRID TILE 5
                    </div>
                </div>
                <div class="fadeBase"></div>
            </a>
         </div>

         <div class="containerImage6 imageBoxy">
            <a class="containerHover" href="#">
                <div class="containerText">
                    <div class="gridLinkBox">
                        GRID TILE 6
                    </div>
                </div>
                <div class="fadeBase"></div>
            </a>
         </div>
    </div>
</div>
                        

| css

/*General grid styles*/

#gridFit {
    width: 100%;
    height: 400px;
    min-height: auto;
    background: rgb(37,42,48);
}   

.tilesContainer,
.containerHover,
.fadeBase,
.containerText {
    width: 100%;
    height: 100%;						
}

.containerHover,
.fadeBase { 
    position:absolute;
    top:0;
    left:0;			
}			

.containerHover {	
    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    transition: all 600ms ease-out;	
    opacity:1;
    cursor:pointer;		
    z-index:100;
}

.containerHover:hover {
    opacity:0;
}

.containerText {
    color:#ffffff;
    position:relative;
    z-index:5;			
    overflow:hidden;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.gridLinkBox {
    position: relative !important;
    max-width: 200px;
    height: 35px;
    margin: 0 auto;
    font-size: 1em;
    padding-top: 15px !important;
    top: 35%;
    border: 1px solid #ffffff;
}			

.fadeBase {
    background-color:#111111;
    opacity:0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);					
    z-index:0;
}

/* individual Tile Styles */

#gridTiles .imageBoxy {
    text-align:center;
    float:left;
    position:relative;
    width: 33.33%;
    height: 50%;
    background-color:#222222;
    z-index:0;
}

#gridTiles .containerImage1 {    
    background-image: url('../images/gridExample1.jpg');
}

#gridTiles .containerImage2 {
    background-image: url('../images/gridExample2.jpg');
}

#gridTiles .containerImage3 {
    background-image: url('../images/gridExample3.jpg');
}

#gridTiles .containerImage4 {
    background-image: url('../images/gridExample4.jpg');
}

#gridTiles .containerImage5 {
    background-image: url('../images/gridExample5.jpg');
}

#gridTiles .containerImage6 {
    background-image: url('../images/gridExample6.jpg');
}


@media (max-width: 767px){

    /* Tiles Resize */

    body #gridFit {
        height: 100%;
    }

    body #gridTiles .imageBoxy {
        width: 100% ;        
        height: 150px ;
        float: none ;
    }

    body .containerText .gridLinkBox {
        top: 30%;
    }
}