Sunday 9 September 2018

Css3 - Show back in sli down whe nHover text DB Card Design 2

<!Doctype html>
<html>
<head>
<style>
// using less preprocessor the css prob is used
.view {
  width: 23%;
  height: 100px;
  margin:0px 0px 0px 15px;
  float: left;
  overflow: hidden;
  position: relative;

  //-webkit-box-shadow: 1px 1px 2px #e6e6e6;
  //-moz-box-shadow: 1px 1px 2px #e6e6e6;
  //box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #fff;
  border: thin solid #ccc;
  //background: #fff url(avatar.png) no-repeat center center;
}
.scard1{
  background:#7AAF3F;
}
.scard2{
  background:#E8892B;
}
.scard3{
  background:#EB2A47;
}
.scard4{
  background:#27699A;
}

.view .mask {
  width: 100%;
  height: 98px;
 // border:thin solid #0f2d51;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  text-align: center;
  background-color: #fff;
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}
.view .frontText {
  display: block;
  position: relative;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}
.frontText{
  h5,h2{
    color:#fff;
  }

}
.view:hover .mask {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.view:hover .frontText {
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -o-transform: translateY(200px);
  -ms-transform: translateY(200px);
  transform: translateY(200px);
}
.score-cards{
  .single-card{
    padding:0px;

  }
}
.frontText{
  padding: 1rem;
}

</style>

</head>

<body>

<div class="main">
    <div class="view scard1">
      <div class="frontText">
        <h5>BOX1</h5>
        <h2>3</h2>
      </div>
      <div class="mask">
        <h5>Hover text</h5>
        <div>LDM</div>
        <a class="info">Read More</a>
      </div>
    </div>
  <div class="view scard2">
    <div class="frontText">
      <h5>BOX2</h5>
      <h2>23</h2>
    </div>
    <div class="mask">
      <h5>Hover text</h5>
      <div>LDM</div>
      <a class="info">Read More</a>
    </div>
  </div>
  <div class="view scard3">
    <div class="frontText">
      <h5>BOX3</h5>
      <h2>312</h2>
    </div>
    <div class="mask">
      <h5>Hover text</h5>
      <div>LDM</div>
      <a class="info">Read More</a>
    </div>
  </div>
  <div class="view scard4">
    <div class="frontText">
      <h5>BOX4</h5>
      <h2>9</h2>
    </div>
    <div class="mask">
      <h5>Hover text</h5>
      <div>LDM</div>
      <a class="info">Read More</a>
    </div>
  </div>
</div>

</body>
</html>
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)