CODEWITHSUNDEEP
htmlcss
v1shnu
v1shnu

Reputation: 2231

box overlay with text in center

I'm using a hover box in my application which shows a content on hover. However , I am not able to get the text in the middle when the box is NOT hovered.

This is my html:

<div class="container">
    <div class="col-xs-3" style="padding-top: 20px;">
      <div class="box box-type-double">
        <div class="box-hover" href="#">
          <div class="box-info">
            <div class="date">
              <p>Design Mixes</p>
            </div>
            <div class="line"></div>
            <div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div>
            <div class="line"></div>
          </div>
          <div class="mask"></div>
        </div>
        <div class="box-content">Design Mixes</div>
      </div>
    </div>
  </div>

This is my Css:

.box {
    text-align: center;
    /*float: left;*/
    /*margin: 5px;*/
    position: relative;
}

.box,
.box-hover,
.box-hover .mask,
.box-img,
.box-info {
    background-color: #b4a28f;
}

.box-hover,
.box-hover .mask,
.box-img {
    position: absolute;
    top: 0;
    left: 0;
}

.box-type-double .box-hover {
    z-index: 5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-align: center;
}

.box-type-double .box-info {
    z-index: 10;
    color: #ffffff;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 5;
    height: 200px;
}

.box-type-double .box-info .headline {
    font-size: 15px;
    width: 90%;
    margin: 0 auto;
}

.box-type-double .box-info .line {
    height: 2px;
    width: 0%;
    margin: 15px auto;
    background-color: #ffffff;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.box-type-double .box-info .date {
    font-size: 10px;
}

.box-type-double .box-hover .mask {
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 0;
}

.box-type-double .box-hover:hover .line {
    width: 90%;
}

.box-type-double .box-hover:hover {
    opacity: 1;
}

.box-content {
    font-size: 15px;
    background-color: #3178b9;
    color: white;
    z-index: 0;
    height: 200px;
}

Plunker link : https://plnkr.co/edit/2TiWlPG7cVIQ56zR5UGX

Upvotes: 0

Views: 170

Answers (2)

thangnqs
thangnqs

Reputation: 1

.box-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.box-type-double .box-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

Let's check it out !

Upvotes: 0

user4447799
user4447799

Reputation:

Put it in a span and apply flex to box-content 

.box {
  text-align: center;
  /*float: left;*/
  /*margin: 5px;*/
  position: relative;
}

.box,
.box-hover,
.box-hover .mask,
.box-img,
.box-info {
  background-color: #b4a28f;
}

.box-hover,
.box-hover .mask,
.box-img {
  position: absolute;
  top: 0;
  left: 0;
}

.box-type-double .box-hover {
  z-index: 5;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  text-align: center;
}

.box-type-double .box-info {
  z-index: 10;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 5;
  height: 200px;
}

.box-type-double .box-info .headline {
  font-size: 15px;
  width: 90%;
  margin: 0 auto;
}

.box-type-double .box-info .line {
  height: 2px;
  width: 0%;
  margin: 15px auto;
  background-color: #ffffff;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.box-type-double .box-info .date {
  font-size: 10px;
}

.box-type-double .box-hover .mask {
  background-color: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 0;
}

.box-type-double .box-hover:hover .line {
  width: 90%;
}

.box-type-double .box-hover:hover {
  opacity: 1;
}

.box-content {
  font-size: 15px;
  background-color: #3178b9;
  color: white;
  z-index: 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="col-xs-3" style="padding-top: 20px;">
    <div class="box box-type-double">
      <div class="box-hover" href="#">
        <div class="box-info">
          <div class="date">
            <p>Design Mixes</p>
          </div>
          <div class="line"></div>
          <div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div>
          <div class="line"></div>
        </div>
        <div class="mask"></div>
      </div>
      <div class="box-content"><span>Design Mixes<span></div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions