Clever Geek Handbook

How to properly position divs for an overlay overlay effect with text below it

I have two lines of 4-box-div. The goal is to have a title inside each window and then hovering over the box will contain more verbose text p with a faded background. I'm close, I just can't figure out how to actually fold the overlay on top of the div instead of being stacked to the side. Any help would be hugely appreciated!

.box {
  width: 200px;
  float: left;
  box-shadow: inset 1px 1px 40px 0 rgba(90, 90, 90, .25);
  margin: 5% auto 0 auto;
  background-color: #DE5D40;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
.overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  z-index: 10;
}
.box:hover .overlay {
  opacity: 1;
}
.overlayText {
  font-family: Helvetica;
  font-weight: 14;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}
.one-fourth.box {
  margin-bottom: 20px;
  height: 130px;
}
/* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}
.one-third,
.two-sixths {
  width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}
.one-fourth {
  width: 23.076923076923077%;
}
.three-fourths {
  width: 74.35897435897436%;
}
.one-sixth {
  width: 14.52991452991453%;
}
.five-sixths {
  width: 82.90598290598291%;
}
.first {
  clear: both;
  margin-left: 0;
}
      

        
        
        
      

    
<div class="one-fourth first box box1">
  <h3>SEO</h3>
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box2">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box3">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box4">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

<div class="one-fourth first box box5">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box6">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box7">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box8">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
Run code


+3


source to share


3 answers


Check that the code below should be yours after.

Positioning is key here.

What you want is a window that overlays its container and has text at the dead center.

In these cases, position:absolute

and position:relative

mean everything.

A little understanding of relativity will help in this situation, but until you open up a copy of the theory of relativity, you can have it.

Your container will be relatively positioned. this means that it is positioned relative to its surrounding content. But it also has a second cascade function.

It tells an absolutely positioned element to behave Absolutely relative to its container.



so when that happens, we can use top,bottom,left & right

it to control where it should sit in the container absolutely.

so we want your text to sit at a standstill, so in this case we say it has top,left,bottom & right 0px & margin:auto;

This will tell your element that it does not accept positioning rules from anywhere in your container, and does not want its marginality to be automatically thought out, but since you have defined the entire axis from which it can be placed, it is towards the center.

Hopefully it helps you understand a little why this is happening.

.box {
  position: relative;
  width: 200px;
  float: left;
  box-shadow: inset 1px 1px 40px 0 rgba(90, 90, 90, .25);
  margin: 5% auto 0 auto;
  background-color: #DE5D40;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
.overlay {
  top: 0px;
  left: 0px;
  position: absolute;
  background: rgba(0, 0, 0, .75);
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  z-index: 10;
  width:100%;
  height:inherit;
}
.box:hover .overlay {
  opacity: 1;
}
.overlayText {
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  font-family: Helvetica;
  font-weight: 14;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  height:15px;
}
.one-fourth.box {
  margin-bottom: 20px;
  height: 130px;
}
/* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}
.one-third,
.two-sixths {
  width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}
.one-fourth {
  width: 23.076923076923077%;
}
.three-fourths {
  width: 74.35897435897436%;
}
.one-sixth {
  width: 14.52991452991453%;
}
.five-sixths {
  width: 82.90598290598291%;
}
.first {
  clear: both;
  margin-left: 0;
}
      

        
        
        
      

    
<div class="one-fourth first box box1">
  <h3>SEO</h3>
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box2">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box3">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box4">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

<div class="one-fourth first box box5">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box6">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box7">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box8">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
Run code


+2


source


If I understand your problem correctly, you need to use position:absolute

your .overlay div to place it on top of your .box div. You can try this:



    .box { position: relative}
    .overlay{position:absolute;
             top:0px;
             left:0px}
0


source


Do it:

.box {
  position:relative;
}
.overlay {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
0


source






More articles:


All Articles