Border spacing and hover effect not working properly - html

Question

I'm trying to do two things here but can't make either work. I've never played with CSS before so I've just been sitting on jsfiddle for a few hours trying to just make this basic div table
The first thing I'm trying to do is get 30px border spacing working. I've tried to enter it everywhere in the CSS and all the cells are still attached instead of having space between them
The second thing is the hover effect. I would like a message to pop up on each cell, but the way I have it now, when you put your mouse over the cell, it shows the hover effect on the entire row
any help would be appreciated. Here's my current code
.BestSeller {
border-spacing: 30px;
display: table;
background-color: #fafafa;
text-align: center;
border-collapse: collapse;
width: 100%;
position: relative;
}
.BestSellerRow {
display: table-row;
}
.BestSellerBody {
display: table-row-group;
}
.BestSellerCell {
display: table-cell;
border: 1px solid #ececec;
padding: 10px;
}
.BestSellerTextBox {
background-color: #ff9225;
display: inline-block;
border-radius: 3px;
cursor: pointer;
color: #ffffff;
padding: 3px 75px;
text-decoration: none;
}
.BestSellerTextBox:hover {
background-color: #ff9f3f;
color: #ffffff;
}
.BestSellerOverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.BestSellerCell:Hover .BestSellerOverlay {
height: 50%;
}
.BestSellerOverlayText {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="BestSeller">
<div class="BestSellerBody">
<div class="BestSellerRow">
<div class="BestSellerCell">I Like Eggs<br><br><br><br><br><br><br><br><br>
<div class="BestSellerOverlay">
<div class="BestSellerOverlayText">Hello World</div>
</div>
</div>
<div class="BestSellerCell">This is just a quick test </div>
<div class="BestSellerCell">This is just a quick test </div>
<div class="BestSellerCell">This is just a quick test </div>
</div>
<div class="BestSellerRow">
<div class="BestSellerCell">I Like Eggs<br><br><br><br><br><br><br><br><br>
<div class="BestSellerOverlay">
<div class="BestSellerOverlayText">Why This No Work</div>
</div>
</div>
<div class="BestSellerCell">This is just a quick test </div>
<div class="BestSellerCell">This is just a quick test </div>
<div class="BestSellerCell">This is just a quick test </div>
</div>
</div>
</div>

Answer 1

Firstly, border-spacing work with border-collapse : separate. Add that to .BestSeller and it will do the work. More refer to the MDN.
Secondly, you set .BestSellerOverlay to position: absolute, which is a good start. However, absolute positions the element to its nearest positioned ancestor.. If there is no nearest positioned ancestor, it will fallback to the viewport. Which is the result you see, the overlay attached to the bottom to the page. I apply position: relative to .BestSellerCell, such the overlay will stick to the cell.
.BestSeller {
display: table;
background-color: #fafafa;
text-align: center;
border-collapse: separate;
border-spacing: 30px;
width: 100%;
position: relative;
}
.BestSellerRow {
display: table-row;
}
.BestSellerBody {
display: table-row-group;
}
.BestSellerCell {
display: table-cell;
border: 1px solid #ececec;
padding: 10px;
position: relative;
}
/*==============================================================================
#BestSellerTextBox
==============================================================================*/
.BestSellerTextBox {
background-color: #ff9225;
display: inline-block;
border-radius: 3px;
cursor: pointer;
color: #ffffff;
padding: 3px 75px;
text-decoration: none;
}
.BestSellerTextBox:hover {
background-color: #ff9f3f;
color: #ffffff;
}
/*==============================================================================
#HoverOverlay For Best Selelr
==============================================================================*/
.BestSellerOverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.BestSellerCell:Hover .BestSellerOverlay {
height: 50%;
}
.BestSellerOverlayText {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="BestSeller">
<div class="BestSellerBody">
<div class="BestSellerRow">
<div class="BestSellerCell">
I Like Eggs<br> <br> <br> <br> <br> <br> <br> <br> <br>
<div class="BestSellerOverlay">
<div class="BestSellerOverlayText">Hello World</div>
</div>
</div>
<div class="BestSellerCell">This is just a quick test</div>
<div class="BestSellerCell">This is just a quick test</div>
<div class="BestSellerCell">This is just a quick test</div>
</div>
<div class="BestSellerRow">
<div class="BestSellerCell">
I Like Eggs<br> <br> <br> <br> <br> <br> <br> <br> <br>
<div class="BestSellerOverlay">
<div class="BestSellerOverlayText">Why This No Work</div>
</div>
</div>
<div class="BestSellerCell">This is just a quick test</div>
<div class="BestSellerCell">This is just a quick test</div>
<div class="BestSellerCell">This is just a quick test</div>
</div>
</div>
</div>

Answer 2

I advise you to use grid.layoutit, where you'll be able to design tables using the grid layout display.

Answer 3

Try with below code. Where I have made changes.
//CSS
.BestSellerCell {
/* display: table-cell; */
border: 1px solid #ececec;
padding: 10px;
margin: 21px;
float: left;
height: 200px;
}
.BestSellerCell:hover{
background-color:red;
}
.child-span{display:none;}
//HTML -- for each div I have added the child span
<div class="BestSellerCell"><span class="child-span">child span</span> This is just a quick test </div>
//Script -- I have added the mouse event
$('.BestSellerCell').mouseenter(function(){
$(this).find('.child-span').show();
});
$('.BestSellerCell').mouseleave(function(){
$(this).find('.child-span').hide();
});