ppd hover blocks - styled with utility classes

some flex classes for content alignment

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="row">
    
    <div class="lg-12 md-12 sm-24">
        <h1 class="screwfix-red text-upper">Latest Range!</h1>
        <h2 class="text-upper">Decorative Switched &amp; Sockets</h2>
        
        <p>SEO copy blah de blah whoop de doo scooby doo my old man's a dustman any old iron have a banana blah de blah whoop de doo scooby doo my old man's a dustman any old iron have a banana blah de blah whoop de doo scooby doo my old man's a dustman any old iron have a banana   </p>
    </div>

    <div class="lg-12 md-12 sm-24">
        <button class="btn btn--primary fill btn--xl">Sign in</button>
    </div>

</div>



<div class="hover-block-container bg-screwfix-blue">

  <!-- initial content -->

  <div class="position-absolute z-1 trbl-0 flex-vh-centre p-15">

    <img class="mw-80p" src="//www.screwfix.com/images/general/assets/gfx/milwaukee/m12-m18-logo.png" alt="M12 M18 Fuel logo">

  </div>

  <!-- content on hover -->

  <div class="hover-content border bg-white flex-vh-centre flex-column">

    <h2 class="mb-15 mt-0 px-10 t-48 lh-1 text-screwfix-blue text-upper screwfix-bold">Milwaukee Fuel™</h2>

    <p class="t-16 t-md-15 t-lg-16 text-screwfix-blue lh-1-2 screwfix-regular mb-0 px-20">M18 Fuel<sup><small>™</small></sup> products feature three <strong>Milwaukee<sup><small>®</small></sup> exclusive innovations</strong>. The POWERSTATE<sup><small>™</small></sup>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;
  color: white;
  padding: 15px 50px 15px 15px;
}

/* 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;
}

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

/* used utility classes */

/* background colours */
.bg-screwfix-red {background-color: #ed1c24}
.bg-screwfix-blue {background-color: #0053a0}

/* text */
.text-screwfix-red {color: #ed1c24}
.text-screwfix-blue {color: #0053a0}

.text-upper {text-transform: uppercase}




/* XXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXX */

/* utility classes - reuse as much as you wanna - don't be scared - it does save time to reuse classes */

/* XXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXX */

/* margins */

.m-0  {margin: 0!important}
.m-20 {margin: 20px!important}
.m-25 {margin: 25px!important}
.m-30 {margin: 30px!important}
.m-40 {margin: 40px!important}
.m-50 {margin: 50px!important}

.mx-0  {margin-left: 0!important; margin-right: 0!important}
.mx-10 {margin-left: 10px; margin-right: 10px}
.mx-20 {margin-left: 20px; margin-right: 20px}
.mx-40 {margin-left: 40px; margin-right: 40px}

.my-0  {margin-top: 0!important; margin-bottom: 0!important}
.my-10 {margin-top: 10px; margin-bottom: 10px}
.my-15 {margin-top: 15px; margin-bottom: 15px}
.my-20 {margin-top: 20px; margin-bottom: 20px}
.my-25 {margin-top: 25px; margin-bottom: 25px}

.mt-0  {margin-top: 0!important}
.mt-10 {margin-top: 10px}
.mt-15 {margin-top: 15px}
.mt-20 {margin-top: 20px}
.mt-25 {margin-top: 25px}
.mt-50 {margin-top: 50px}
.mt-60 {margin-top: 60px}

@media (min-width: 641px) {
    .mt-md-25 {margin-top: 25px}
    .mt-md-35 {margin-top: 35px}
    .mt-md-60 {margin-top: 60px}
}

@media (min-width: 1025px) {
    .mt-lg-20 {margin-top: 20px}
    .mt-lg-40 {margin-top: 40px}
}

.mr-40 {margin-right:...