CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
holian
holian

Reputation: 755

How to add 2px gap between "cells"

I would like to create a 4x3 "fluent-responsive" table with css. When i hit the mouse over a div make some effect. For now, here is my markup which works well. Except the margin.

The cell's width is 25% so if i use margin than the fourth cell break the line..

Please help to correct my code, i would like 2px gap between cells.

Here is my HTML+CSS part

<!doctype html>

    <head>

        <link rel="stylesheet" href="css/main2.css">

    </head>
    <body>


    <div class="wrapper">
            <div class="container">
                <div class="sor" style="background-color:red">
                  <div class="grid-container">
                   <div class="col-md-12">
                      <div class="cella"> <img class="images_main" src="images/1.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/2.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/3.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/4.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/5.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/6.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/7.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/8.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/9.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                     <div class="cella"> <img class="images_main" src="images/10.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                       <div class="cella"> <img class="images_main" src="images/11.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                       <div class="cella"> <img class="images_main" src="images/12.png">
                       <div class="overbox">
                        <div class="title">Title</div>
                       </div>
                      </div>
                    </div>
                  </div>
                 </div>
            </div>

       </div>



    </body>
</html>


.wrapper{
    background-color: rgba(0, 0, 0, 0.05);
    width:100%
}



.cella {

       width: calc(100%/4);
       height: 50%;
       float: left; 
       overflow:hidden;
       position: relative;


}


.cella img {
 -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: scale(1.1);
}
.cella:hover img{
   transform: scale(1); 

}

.grid-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.images_main {
  width:100%;

}
.cella .overbox {
  background-color:#34aadc;
  position: absolute;

  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 100%;
  float: left; 
  height:100%;
  top:0;
}
.cella:hover .overbox { opacity: 0.9;     /*border: 10px solid #fff;*/}

.overbox .title {
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  border: 2px solid white;
  bottom: 5px;
  top: 5px;
  left: 5px;
  right:5px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
  line-height: 11em;
  min-height: 92%;
  position: absolute;
  text-transform: uppercase;
  text-align:center;
  vertical-align: middle;

}
.overbox:hover .title,
.overbox:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

Upvotes: 0

Views: 68

Answers (1)

kiran Gopal
kiran Gopal

Reputation: 450

for the margin you can do like this

.cella {
       width: calc(100%/4 - 6px);
       height: 50%;
       float: left; 
       overflow:hidden;
       position: relative;
       margin-right:2px;
}
.cella:nth-child(4n){
    margin-right:0px;
}

the pluk https://jsfiddle.net/1u15t1xq/

Upvotes: 1

Related Questions