hover blocks (stripped down)

by ian_smithz

HTML

<div class="hover-block-container">

  <!-- initial content -->

  <div class="block-content">

    <p>some text - youuu deciiiide</p>

  </div>

  <!-- content on hover -->

  <div class="hover-content">

    <h2>Milwaukee Fuel™</h2>

    <p>M18 Fuel™ products feature three <strong>Milwaukee® exclusive innovations</strong>. The POWERSTATE™ Brushless Motor, Redlithium battery pack and redlink plus intelligence hardware &amp; software that deliver <strong>unmatched power, run time and durability</strong>. </p>

  </div>

</div>

CSS

.hover-block-container {
  height: 300px;
  position: relative;
  border: 1px solid #d1d1d1;
}

.block-content {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
}

/* block hover overlay */
.hover-content {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  background: blue;
  color: #fff;
}

.hover-content:hover {
  opacity: 1;
}